Reactive base

README.md

@@ -1,2 +1,2 @@
-# reactive
+# Reactive
 Biased generator for react apps. Supports sass and jade.

generators/app/index.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var yo = require('yeoman-generator'),
+  yosay = require('yosay');
+
+module.exports = yo.generators.Base.extend({
+  constructor: function() {
+    yo.generators.Base.apply(this, arguments);
+  },
+
+  initializing: function() {
+    this.pkg = require('../../package.json');
+  },
+
+  prompting: function() {
+    var done = this.async();
+
+    this.log(yosay('\'Allo! Devs! Reactive does lot of stuff.'));
+
+    this.prompt([{
+      type: 'input',
+      name: 'rname',
+      message: 'Your project name',
+      default: this.appname // Default to current folder name
+    }, {
+      type: 'input',
+      name: 'rauthor',
+      message: 'Author name',
+      default: 'Reactive' // Defaults to Reactive
+    }], function(answers) {
+      this.rname = answers.rname;
+      this.rauthor = answers.rauthor;
+      done();
+    }.bind(this));
+  },
+
+  writing: {
+    appJSON: function() {
+      this.template('app.json', 'app.json');
+    },
+    git: function() {
+      this.copy('gitignore', '.gitignore');
+      this.copy('gitattributes', '.gitattributes');
+    },
+    bower: function() {
+      // this.copy('bower.json', 'bower.json');
+      this.copy('bowerrc', '.bowerrc');
+    },
+    packageJSON: function() {
+      this.template('package.json', 'package.json');
+    },
+    reactive: function() {
+      this.mkdir('.reactive');
+      this.mkdir('.reactive/tpl');
+      this.copy('gulpfile.js', 'gulpfile.js');
+      this.copy('component.js', '.reactive/component.js');
+      this.copy('compile.js', '.reactive/compile.js');
+      this.copy('captain.js', '.reactive/captain.js');
+      this.copy('util.js', '.reactive/util.js');
+      this.copy('component.json.tpl', '.reactive/tpl/component.json.tpl');
+      this.copy('component.jsx.tpl', '.reactive/tpl/component.jsx.tpl');
+      this.copy('trigger.jsx.tpl', '.reactive/tpl/trigger.jsx.tpl');
+      this.copy('component.jade.tpl', '.reactive/tpl/component.jade.tpl');
+      this.copy('component.scss.tpl', '.reactive/tpl/component.scss.tpl');
+    },
+    components: function() {
+      this.mkdir('src/components');
+      this.mkdir('src/components/Yo');
+      this.mkdir('src/components/Yo/src');
+      this.mkdir('src/components/Yo/test');
+      this.mkdir('src/components/Yo/src/jsx');
+      // this.copy('component_index.jade', 'src/components/yo/src/index.jade')
+    },
+    src: function() {
+      this.mkdir('src/actions');
+      this.mkdir('src/constants');
+      this.mkdir('src/dispatchers');
+      this.mkdir('src/layouts');
+      this.mkdir('src/media');
+      this.mkdir('src/media/styles');
+      this.mkdir('src/media/images');
+      this.mkdir('src/media/fonts');
+      this.mkdir('src/mixins');
+      this.mkdir('src/stores');
+      this.mkdir('src/utility');
+    },
+    app: function() {
+      // add app directories
+      this.mkdir('src');
+      this.mkdir('.tmp');
+      this.mkdir('.tmp/app');
+      this.mkdir('.tmp/components');
+      this.mkdir('test');
+    }
+  }
+});

generators/app/templates/app.json

@@ -0,0 +1,46 @@
+{
+  "name": "<%= rname %>",
+  "author": "<%= rauthor %>",
+  "dependencies": {
+    "js-x": ["actions", "constants", "dispatchers", "mixins", "stores", "utility", "layouts"],
+    "s-css": ["media/styles/base", "media/styles"],
+    "components": ["Yo"]
+  },
+  "components":{
+    "basePath": "src/components",
+    "tempDir": ".tmp/components",
+    "tpl" : {
+      "folders" : ["src", "src/jsx", "test"],
+      "files" : [
+        {
+          "name": "component",
+          "type": "json",
+          "path": ".",
+          "content": "tpl/component.json.tpl"
+        },
+        {
+          "type" : "jsx",
+          "path": "src/jsx",
+          "content": "tpl/component.jsx.tpl"
+        },
+        {
+          "name" : "trigger",
+          "type" : "jsx",
+          "path": "src/jsx",
+          "content": "tpl/trigger.jsx.tpl"
+        },
+        {
+          "name" : "index",
+          "type" : "jade",
+          "path": "src",
+          "content": "tpl/component.jade.tpl"
+        },
+        {
+          "type" :  "scss",
+          "path": "src",
+          "content": "tpl/component.scss.tpl"
+        }
+      ]
+    }
+  }
+}

generators/app/templates/bower.json

@@ -0,0 +1 @@
+{}

generators/app/templates/bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "src/media/bower_components"
+}

generators/app/templates/captain.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var path = require('path'),
+  fs = require('fs'),
+  gulp = require('gulp'),
+  compile = require('./compile.js'),
+  util = require('./util.js'),
+  connect = require('gulp-connect'),
+  gutil = require('gulp-util'),
+  lodash = require('lodash'),
+  config = require('../app.json');
+
+var baseDir = path.resolve(__dirname, '../'),
+  appDir = path.join(baseDir, 'src'),
+  tempDir = path.join(baseDir, '/.tmp', 'app');
+
+var Captain = function() {};
+
+Captain.prototype.watch = function() {
+  try {
+    fs.mkdirSync(path.join(baseDir + '/.tmp'));
+  } catch (e) {
+    if (e.code != 'EEXIST') {
+      gutil.log(gutil.colors.red('App watch failed.', e));
+      return;
+    }
+  }
+
+  try {
+    util.rmdir(tempDir);
+  } catch (e) {
+    if (e.code != 'ENOENT') {
+      gutil.log(gutil.colors.red('App watch failed.', e));
+      return;
+    }
+  }
+
+  try {
+    fs.mkdirSync(tempDir);
+    fs.mkdirSync(path.join(tempDir, 'css'));
+    fs.mkdirSync(path.join(tempDir, 'scripts'));
+  } catch (e) {
+    if (e.code != 'EEXIST') {
+      gutil.log(gutil.colors.red('App watch failed.', e));
+      return;
+    }
+  }
+
+  var _appCss = lodash.map(config.dependencies['s-css'], function(dep) {
+    return path.join(appDir, dep, '/*.scss');
+  });
+
+  var _componentCss = lodash.map(config.dependencies.components, function(dep) {
+    return path.join(appDir, 'components', dep, 'src/*.scss');
+  });
+
+  var _cssDeps = _appCss.concat(_componentCss);
+
+  gulp.task('compile-scss', function() {
+    return compile.scss({
+      sources: _cssDeps,
+      destination: path.join(tempDir, 'css'),
+    });
+  });
+
+  /* Note: Here we compile only trigger.jsx because trigger is only used for
+   * development phase which actually includes the component */
+  gulp.task('compile-jsx', function() {
+    return compile.jsx({
+      source: path.join(appDir, 'boot.jsx'),
+      destination: path.join(tempDir, 'scripts')
+    }, 'app');
+  });
+
+  gulp.task('compile-jade', ['compile-scss'], function() {
+    return compile.jade({
+      ignore: '.tmp/app',
+      inject: path.join(tempDir, 'css', '/*.css'),
+      source: path.join(appDir, 'index.jade'),
+      destination: tempDir
+    });
+  });
+
+  gulp.task('connect', function() {
+    util.getPort(9000, function(port) {
+      connect.server({
+        root: tempDir,
+        port: port,
+        livereload: true
+      });
+      gutil.log(gutil.colors.green('Watching app for changes.'));
+    });
+  });
+
+  gulp.task('watch', function() {
+    // Watch current component jade
+    gulp.watch([path.join(appDir, '/*.jade')], ['compile-jade']);
+
+    // Watch app & component scss
+    gulp.watch(_cssDeps, ['compile-scss', 'compile-jade']);
+
+    // Watch app & component jsx
+  });
+
+  gulp.start('compile-scss', 'compile-jade', 'compile-jsx', 'watch', 'connect');
+};
+
+Captain.prototype.build = function() {};
+
+Captain.prototype.test = function() {};
+
+module.exports = Captain;

generators/app/templates/compile.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var gulp = require('gulp'),
+  jade = require('gulp-jade'),
+  concat = require('gulp-concat'),
+  connect = require('gulp-connect'),
+  browserify = require('gulp-browserify'),
+  gutil = require('gulp-util'),
+  sass = require('gulp-sass'),
+  inject = require('gulp-inject'),
+  util = require('./util.js');
+
+module.exports = {
+  scss: function(paths) {
+    return gulp.src(paths.sources)
+      .pipe(sass())
+      .pipe(connect.reload())
+      .pipe(gulp.dest(paths.destination));
+  },
+
+  jade: function(paths) {
+    return gulp.src(paths.source)
+      .pipe(inject(
+        gulp.src(paths.inject, {read: false}, {relative: true}),
+        {
+          ignorePath: paths.ignore,
+          addRootSlash: false
+        }
+      ))
+      .pipe(jade({
+        locals: {},
+        pretty: true
+      }))
+      .pipe(connect.reload())
+      .pipe(gulp.dest(paths.destination));
+  },
+
+  jsx: function(paths, _component) {
+    return gulp.src(paths.source)
+      .pipe(browserify({
+        transform: 'reactify'
+      }))
+      .pipe(concat(_component + '.js'))
+      .pipe(connect.reload())
+      .pipe(gulp.dest(paths.destination));
+  }
+};

generators/app/templates/component.jade.tpl

@@ -0,0 +1,10 @@
+html
+        head
+                // Can't touch this! Or it will go BOOOM.
+                //- inject:css
+                //- endinject
+                // Aye! Captain.
+
+        body
+                #main-wrapper
+                script(src='scripts/trigger.js')