From 9be03cda29f3ff07649422f03d62999fa369562c Mon Sep 17 00:00:00 2001 From: SKatiyar Date: Fri, 13 Feb 2015 16:32:56 +0530 Subject: [PATCH 1/5] initial commit --- package.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..738936f --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "generator-reactive", + "version": "0.0.1", + "description": "All simple generator for react apps. Supports sass and jade.", + "main": "index.js", + "keywords": ["yeoman-generator", "react", "reactjs", "sass", "jade"], + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Babaji", + "license": "ISC" +} From 027f16f1c2125188ccd75e54dbbb57d398764832 Mon Sep 17 00:00:00 2001 From: SKatiyar Date: Sun, 15 Feb 2015 19:40:35 +0530 Subject: [PATCH 2/5] basic --- generators/app/index.js | 93 +++++++ generators/app/templates/app.json | 40 +++ generators/app/templates/bower.json | 1 + generators/app/templates/bowerrc | 3 + generators/app/templates/compile.js | 35 +++ generators/app/templates/component.jade.tpl | 8 + generators/app/templates/component.js | 267 ++++++++++++++++++++ generators/app/templates/component.json.tpl | 11 + generators/app/templates/component.jsx.tpl | 15 ++ generators/app/templates/component.scss.tpl | 0 generators/app/templates/gitattributes | 1 + generators/app/templates/gitignore | 7 + generators/app/templates/gulpfile.js | 40 +++ generators/app/templates/package.json | 18 ++ generators/app/templates/trigger.jsx.tpl | 5 + package.json | 13 +- 16 files changed, 555 insertions(+), 2 deletions(-) create mode 100644 generators/app/index.js create mode 100644 generators/app/templates/app.json create mode 100644 generators/app/templates/bower.json create mode 100644 generators/app/templates/bowerrc create mode 100644 generators/app/templates/compile.js create mode 100644 generators/app/templates/component.jade.tpl create mode 100644 generators/app/templates/component.js create mode 100644 generators/app/templates/component.json.tpl create mode 100644 generators/app/templates/component.jsx.tpl create mode 100644 generators/app/templates/component.scss.tpl create mode 100644 generators/app/templates/gitattributes create mode 100644 generators/app/templates/gitignore create mode 100644 generators/app/templates/gulpfile.js create mode 100644 generators/app/templates/package.json create mode 100644 generators/app/templates/trigger.jsx.tpl diff --git a/generators/app/index.js b/generators/app/index.js new file mode 100644 index 0000000..253bce6 --- /dev/null +++ b/generators/app/index.js @@ -0,0 +1,93 @@ +'use strict'; + +var yo = require('yeoman-generator'); + +module.exports = yo.generators.Base.extend({ + constructor: function() { + yo.generators.Base.apply(this, arguments); + }, + + initializing: function() { + this.pkg = require('../../package.json'); + console.log('fuck you babaji', this.pkg) + // "gulp-postcss": "^3.0.0",<% if (includeSass) { %> + // "gulp-sass": "^1.2.4",<% } %> + // "gulp-cache": "^0.2.2", + // "gulp-csso": "^0.2.6", + // "gulp-filter": "^2.0.0", + // "gulp-flatten": "^0.0.4", + // "gulp-if": "^1.2.1", + // "gulp-imagemin": "^2.0.0", + // "gulp-jshint": "^1.5.3", + // "gulp-load-plugins": "^0.8.0", + // "gulp-minify-html": "^0.1.6", + // "gulp-size": "^1.1.0", + // "gulp-sourcemaps": "^1.3.0", + // "gulp-uglify": "^1.0.1", + // "gulp-useref": "^1.0.2", + // "jshint-stylish": "^1.0.0", + // "main-bower-files": "^2.1.0", + // "opn": "^1.0.0", + // "wiredep": "^2.0.0" + // "autoprefixer-core": "^4.0.2", + // "browser-sync": "^1.8.2", + // "del": "^1.1.1", + }, + + 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.copy('gulpfile.js', 'gulpfile.js'); + this.mkdir('.reactive'); + this.mkdir('.reactive/tpl'); + this.copy('component.js', '.reactive/component.js'); + this.copy('compile.js', '.reactive/compile.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.jsde') + }, + 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/components'); + this.mkdir('test'); + } + } +}); diff --git a/generators/app/templates/app.json b/generators/app/templates/app.json new file mode 100644 index 0000000..45c56e6 --- /dev/null +++ b/generators/app/templates/app.json @@ -0,0 +1,40 @@ +{ + "app": {}, + "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" + } + ] + } + } +} diff --git a/generators/app/templates/bower.json b/generators/app/templates/bower.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/generators/app/templates/bower.json @@ -0,0 +1 @@ +{} diff --git a/generators/app/templates/bowerrc b/generators/app/templates/bowerrc new file mode 100644 index 0000000..04f7ec3 --- /dev/null +++ b/generators/app/templates/bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "src/media/bower_components" +} diff --git a/generators/app/templates/compile.js b/generators/app/templates/compile.js new file mode 100644 index 0000000..87cebf6 --- /dev/null +++ b/generators/app/templates/compile.js @@ -0,0 +1,35 @@ +'use strict'; + +var gulp = require('gulp'), + jade = require('gulp-jade'), + concat = require('gulp-concat'), + browserify = require('gulp-browserify'), + gutil = require('gulp-util'), + sass = require('gulp-sass'); + +module.exports = { + sass: function(paths) { + return gulp.src(paths.sources) + .pipe(sass()) + .pipe(concat('build.css')) + .pipe(gulp.dest(paths.destination)); + }, + + jade: function(paths) { + return gulp.src(paths.source) + .pipe(jade({ + locals: {}, + pretty: true + })) + .pipe(gulp.dest(paths.destination)); + }, + + jsx: function(paths, _component) { + return gulp.src(paths.source) + .pipe(browserify({ + transform: 'reactify' + })) + .pipe(concat(_component + '.js')) + .pipe(gulp.dest(paths.destination)); + } +}; diff --git a/generators/app/templates/component.jade.tpl b/generators/app/templates/component.jade.tpl new file mode 100644 index 0000000..d6d6e37 --- /dev/null +++ b/generators/app/templates/component.jade.tpl @@ -0,0 +1,8 @@ +html + head + // Don't touch! Or it will go BOOOM. + link(rel='stylesheet', href='css/<%- name %>.css') + // Aye! Captain. + body + #main-wrapper + script(src='scripts/trigger.js') diff --git a/generators/app/templates/component.js b/generators/app/templates/component.js new file mode 100644 index 0000000..661ac7c --- /dev/null +++ b/generators/app/templates/component.js @@ -0,0 +1,267 @@ +'use strict'; + +var fs = require('fs'), + path = require('path'), + lodash = require('lodash'), + gutil = require('gulp-util'), + gulp = require('gulp'), + net = require('net'), + connect = require('gulp-connect'), + compile = require('./compile.js'), + config = require('../app.json').components; + +var baseDir = path.resolve(__dirname, '../'); + +var Component = function() {}; + +Component.prototype.add = function(_component) { + var _componentPath = path.join(path.join(baseDir, config.basePath), _component); + + try { + fs.mkdirSync(_componentPath); + } catch (e) { + if (e.code == 'EEXIST') { + gutil.log(gutil.colors.red(_component + ' exits in ' + config.basePath)); + } else { + gutil.log(gutil.colors.red(_component + ' couldn\'t be added ', e)); + } + return; + } + + config.tpl.folders.forEach(function(foldername) { + fs.mkdirSync(path.join(_componentPath, foldername)); + }); + + config.tpl.files.forEach(function(file) { + var _path = path.join(_componentPath, file.path); + + var filename = (file.name ? file.name : _component) + '.' + file.type; + + var template = fs.readFileSync(path.join(__dirname, file.content), 'utf8'); + fs.writeFile( + path.join(_path, filename), + lodash.template(template)({ + name: _component.charAt(0).toUpperCase() + _component.slice(1), + author: 'Reactive' + }), + function(e) { + if (e) { + gutil.log(e); + } + } + ); + }); +}; + +Component.prototype.remove = function(_component) { + var _componentPath = path.join(path.join(baseDir, config.basePath), _component); + try { + rmdir(_componentPath); + } catch (e) { + if (e.code != 'EEXIST') { + console.error(_component + ' doesn\'t exist at ' + config.basePath); + return; + } + } + + console.log(_component + ' removed.'); +}; + +Component.prototype.info = function(_component) { + var _componentPath = path.join(path.join(baseDir, config.basePath), _component); + try { + var _jsonFile = fs.readFileSync(path.join(_componentPath, 'component.json'), 'utf8'); + } catch (e) { + if (e.code != 'EEXIST') { + console.error(_component + ' doesn\'t exist in ' + config.basePath); + return; + } + } + + console.log(_jsonFile); +}; + +Component.prototype.watch = function(_component) { + var _baseDir = path.join(baseDir, config.basePath), + _componentDir = path.join(_baseDir, _component), + _tempDir = path.join(baseDir, config.tempDir), + _tempComponentDir = path.join(_tempDir, _component); + + try { + var _depMap = {}; + getDep(_baseDir, _component, _depMap); + } catch (e) { + gutil.log(gutil.colors.red(_component + ' watch failed.', e)); + return; + } + + try { + fs.mkdirSync(path.join(baseDir + '/.tmp')); + } catch (e) { + if (e.code != 'EEXIST') { + gutil.log(gutil.colors.red(_component + ' watch failed.', e)); + return; + } + } + + try { + fs.mkdirSync(_tempDir); + } catch (e) { + if (e.code != 'EEXIST') { + gutil.log(gutil.colors.red(_component + ' watch failed.', e)); + return; + } + } + + try { + rmdir(_tempComponentDir); + } catch (e) { + if (e.code != 'ENOENT') { + gutil.log(gutil.colors.red(_component + ' watch failed.', e)); + return; + } + } + + try { + fs.mkdirSync(_tempComponentDir); + fs.mkdirSync(path.join(_tempComponentDir, 'css')); + fs.mkdirSync(path.join(_tempComponentDir, 'scripts')); + } catch (e) { + gutil.log(gutil.colors.red(_component + ' watch failed.', e)); + return; + } + + // Get components + var _deps = Object.keys(_depMap); + + // extract dependencies + var _jsxDeps = [], + _importSass = [], + _importJsx = [], + _sassDeps = []; + + var _tempSass = [], + _tempJsx = []; + + _deps.forEach(function(_dep) { + _jsxDeps.push(path.join(_baseDir, _dep, '/src/jsx/*.jsx'), path.join(_baseDir, _dep, '/src/jsx/*.js')); + _sassDeps.push(path.join(_baseDir, _dep, '/src/*.scss'), path.join(_baseDir, _dep, '/src/*.css')); + _tempSass = lodash.uniq(_tempSass.concat(_depMap[_dep].extSass)); + _tempJsx = lodash.uniq(_tempJsx.concat(_depMap[_dep].extJsx)); + }); + + _tempSass.forEach(function(_path) { + _path = path.join(_componentDir, _path); + _importSass.push(path.join(_path, '/*.scss'), path.join(_path, '/*.css')); + }); + + _tempJsx.forEach(function(_path) { + _path = path.join(_componentDir, _path); + _importJsx.push(path.join(_path, '/*.jsx'), path.join(_path, '/*.js')); + }); + + gulp.task('compile-sass', function() { + return compile.sass({ + sources: _sassDeps.concat(_importSass), + destination: path.join(_tempComponentDir, 'css') + }); + }); + + gulp.task('compile-jade', function() { + return compile.jade({ + source: path.join(_componentDir, 'src/*.jade'), + destination: _tempComponentDir + }); + }); + + /* 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(_componentDir, 'src/jsx', 'trigger.jsx'), + destination: path.join(_tempComponentDir, 'scripts') + }, 'trigger'); + }); + + gulp.task('watch', function() { + // Watch current component jade + gulp.watch([path.join(_componentDir, '/src/*.jade')], ['compile-jade']); + + // Watch current and dependency component jsx + gulp.watch(_jsxDeps, ['compile-jsx']); + + // Watch current and dependency component sass + gulp.watch(_sassDeps, ['compile-sass']); + + // Watch external js & jsx + gulp.watch(_importJsx, ['compile-jsx']); + + // Watch external sass + gulp.watch(_importSass, ['compile-sass']); + }); + + gulp.task('connect', function() { + getPort(9000, function(port) { + connect.server({ + root: _tempComponentDir, + port: port, + livereload: true + }); + gutil.log(gutil.colors.green('Watching component - ' + _component)); + }); + }); + + gulp.start('compile-sass', 'compile-jade', 'compile-jsx', 'watch', 'connect'); +}; + +Component.prototype.test = function(_component) {}; + +Component.prototype.coverage = function(_component) {}; + +// Get free port +var getPort = function(port, cb) { + var server = net.createServer(); + server.listen(port, function(err) { + server.once('close', function() { + cb(port); + }); + server.close(); + }); + server.on('error', function(err) { + getPort(port + 1, cb); + }); +}; + +// Recursive dependency check +var getDep = function(_baseDir, _component, _depMap) { + var _jsonFile = fs.readFileSync(path.join(_baseDir, _component, 'component.json'), 'utf8'); + var _componentInfo = JSON.parse(_jsonFile); + _depMap[_component] = _componentInfo.dependencies; + for (var i = 0; i < _componentInfo.dependencies.components.length; i++) { + if (!_depMap[_componentInfo.dependencies.components[i]]) { + getDep(_baseDir, _componentInfo.dependencies.components[i], _depMap); + } + } +}; + +// Recursive directory remove +var rmdir = function(dir) { + var list = fs.readdirSync(dir); + for (var i = 0; i < list.length; i++) { + var filename = path.join(dir, list[i]); + var stat = fs.statSync(filename); + + if (filename == '.' || filename == '..') { + // pass these files + } else if (stat.isDirectory()) { + // rmdir recursively + rmdir(filename); + } else { + // rm fiilename + fs.unlinkSync(filename); + } + } + fs.rmdirSync(dir); +}; + +module.exports = Component; diff --git a/generators/app/templates/component.json.tpl b/generators/app/templates/component.json.tpl new file mode 100644 index 0000000..d3b94d4 --- /dev/null +++ b/generators/app/templates/component.json.tpl @@ -0,0 +1,11 @@ +{ + "name" : "<%= name %>", + "author" : "<%= author %>", + "keywords" : [], + "description" : "", + "dependencies" : { + "extSass" : [], + "extJsx": [], + "components" : [] + } +} diff --git a/generators/app/templates/component.jsx.tpl b/generators/app/templates/component.jsx.tpl new file mode 100644 index 0000000..6f1584d --- /dev/null +++ b/generators/app/templates/component.jsx.tpl @@ -0,0 +1,15 @@ +'use strict'; + +var React = require('react/addons'); + +var <%= name %> = React.createClass({ + getInitialState: function() { + return {}; + }, + + render: function() { + return (
); + } +}); + +module.exports = <%- name %>; diff --git a/generators/app/templates/component.scss.tpl b/generators/app/templates/component.scss.tpl new file mode 100644 index 0000000..e69de29 diff --git a/generators/app/templates/gitattributes b/generators/app/templates/gitattributes new file mode 100644 index 0000000..176a458 --- /dev/null +++ b/generators/app/templates/gitattributes @@ -0,0 +1 @@ +* text=auto diff --git a/generators/app/templates/gitignore b/generators/app/templates/gitignore new file mode 100644 index 0000000..fa9ec23 --- /dev/null +++ b/generators/app/templates/gitignore @@ -0,0 +1,7 @@ +node_modules +dist +.tmp +.sass-cache +.reactive +src/media/bower_components +test/bower_components diff --git a/generators/app/templates/gulpfile.js b/generators/app/templates/gulpfile.js new file mode 100644 index 0000000..c057730 --- /dev/null +++ b/generators/app/templates/gulpfile.js @@ -0,0 +1,40 @@ +'use strict'; + +var gulp = require('gulp'), + gulpCommand = require('gulp-command')(gulp); + +var Component = new(require('./.reactive/component.js')); + +gulp + .option('component', '-a, --add ', 'New Component') + .option('component', '-r, --remove', 'Delete Component') + .option('component', '-i, --info', 'Component Information') + .option('component', '-w, --watch', 'Watch Component Development') + .option('component', '-t, --test', 'Run tests for the Component') + .option('component', '-c, --coverage', 'Run code coverage') + .task('component', function() { + if (this.flags.add) { + return Component.add(this.flags.add); + } else if (this.flags.remove) { + return Component.remove(this.flags.remove); + } else if (this.flags.info) { + return Component.info(this.flags.info); + } else if (this.flags.watch) { + return Component.watch(this.flags.watch); + } else if (this.flags.test) { + return Component.test(this.flags.test); + } else if (this.flags.coverage) { + return Component.coverage(this.flags.test); + } + }); + +gulp + .task('watch', function() { + console.log('watch'); + }) + .task('build', function() { + console.log('build'); + }) + .task('test', function() { + console.log('test'); + }); diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json new file mode 100644 index 0000000..f574a95 --- /dev/null +++ b/generators/app/templates/package.json @@ -0,0 +1,18 @@ +{ + "private": true, + "engines": { + "node": ">=0.10.0" + }, + "devDependencies": { + "gulp": "^3.8.10", + "gulp-connect": "^2.2.0", + "gulp-browserify": "^0.5.1", + "gulp-sass": "^1.3.3", + "gulp-command": "^0.1.1", + "gulp-concat": "^2.5.0", + "gulp-util": "^3.0.3", + "gulp-util": "^3.0.3", + "gulp-jade": "^0.11.0", + "lodash": "^3.2.0" + } +} diff --git a/generators/app/templates/trigger.jsx.tpl b/generators/app/templates/trigger.jsx.tpl new file mode 100644 index 0000000..6425f1b --- /dev/null +++ b/generators/app/templates/trigger.jsx.tpl @@ -0,0 +1,5 @@ +var React = require('react'); + +var <%- name %> = require('./<%- name %>.jsx'); + +React.renderComponent(<<%- name %>/>, document.getElementById('main-wrapper')); diff --git a/package.json b/package.json index 738936f..5b33a49 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,19 @@ "version": "0.0.1", "description": "All simple generator for react apps. Supports sass and jade.", "main": "index.js", - "keywords": ["yeoman-generator", "react", "reactjs", "sass", "jade"], + "keywords": [ + "yeoman-generator", + "react", + "reactjs", + "sass", + "jade" + ], "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Babaji", - "license": "ISC" + "license": "unlicense", + "dependencies": { + "yeoman-generator": "^0.18.8" + } } From 78c89345244025625c94d89a17a6931375a2ea30 Mon Sep 17 00:00:00 2001 From: SKatiyar Date: Tue, 3 Mar 2015 14:16:01 +0530 Subject: [PATCH 3/5] some work done --- generators/app/index.js | 52 +++++++++++++-------------- generators/app/templates/app.json | 3 +- generators/app/templates/package.json | 4 ++- package.json | 3 +- 4 files changed, 33 insertions(+), 29 deletions(-) diff --git a/generators/app/index.js b/generators/app/index.js index 253bce6..fcac6f0 100644 --- a/generators/app/index.js +++ b/generators/app/index.js @@ -1,6 +1,7 @@ 'use strict'; -var yo = require('yeoman-generator'); +var yo = require('yeoman-generator'), + yosay = require('yosay'); module.exports = yo.generators.Base.extend({ constructor: function() { @@ -9,29 +10,28 @@ module.exports = yo.generators.Base.extend({ initializing: function() { this.pkg = require('../../package.json'); - console.log('fuck you babaji', this.pkg) - // "gulp-postcss": "^3.0.0",<% if (includeSass) { %> - // "gulp-sass": "^1.2.4",<% } %> - // "gulp-cache": "^0.2.2", - // "gulp-csso": "^0.2.6", - // "gulp-filter": "^2.0.0", - // "gulp-flatten": "^0.0.4", - // "gulp-if": "^1.2.1", - // "gulp-imagemin": "^2.0.0", - // "gulp-jshint": "^1.5.3", - // "gulp-load-plugins": "^0.8.0", - // "gulp-minify-html": "^0.1.6", - // "gulp-size": "^1.1.0", - // "gulp-sourcemaps": "^1.3.0", - // "gulp-uglify": "^1.0.1", - // "gulp-useref": "^1.0.2", - // "jshint-stylish": "^1.0.0", - // "main-bower-files": "^2.1.0", - // "opn": "^1.0.0", - // "wiredep": "^2.0.0" - // "autoprefixer-core": "^4.0.2", - // "browser-sync": "^1.8.2", - // "del": "^1.1.1", + }, + + 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: { @@ -50,9 +50,9 @@ module.exports = yo.generators.Base.extend({ this.template('package.json', 'package.json'); }, reactive: function() { - this.copy('gulpfile.js', 'gulpfile.js'); 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('component.json.tpl', '.reactive/tpl/component.json.tpl'); @@ -67,7 +67,7 @@ module.exports = yo.generators.Base.extend({ 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.jsde') + // this.copy('component_index.jade', 'src/components/yo/src/index.jade') }, src: function() { this.mkdir('src/actions'); diff --git a/generators/app/templates/app.json b/generators/app/templates/app.json index 45c56e6..2dbcfc9 100644 --- a/generators/app/templates/app.json +++ b/generators/app/templates/app.json @@ -1,5 +1,6 @@ { - "app": {}, + "name": "<%= rname %>", + "author": "<%= rauthor %>", "components":{ "basePath": "src/components", "tempDir": ".tmp/components", diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json index f574a95..78a75b9 100644 --- a/generators/app/templates/package.json +++ b/generators/app/templates/package.json @@ -1,4 +1,7 @@ { + "name": "<%= rname %>", + "author": "<%= rauthor %>", + "version": "0.0.1", "private": true, "engines": { "node": ">=0.10.0" @@ -11,7 +14,6 @@ "gulp-command": "^0.1.1", "gulp-concat": "^2.5.0", "gulp-util": "^3.0.3", - "gulp-util": "^3.0.3", "gulp-jade": "^0.11.0", "lodash": "^3.2.0" } diff --git a/package.json b/package.json index 5b33a49..266d2ce 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "author": "Babaji", "license": "unlicense", "dependencies": { - "yeoman-generator": "^0.18.8" + "yeoman-generator": "^0.18.8", + "yosay": "^1.0.2" } } From ccedbf95b3c9c89ccd74b2e3a194b438aab7cb1e Mon Sep 17 00:00:00 2001 From: SKatiyar Date: Wed, 4 Mar 2015 11:14:30 +0530 Subject: [PATCH 4/5] improving --- README.md | 2 +- generators/app/index.js | 3 + generators/app/templates/app.json | 5 + generators/app/templates/captain.js | 112 ++++++++++++++++++++ generators/app/templates/compile.js | 18 +++- generators/app/templates/component.jade.tpl | 6 +- generators/app/templates/component.js | 92 ++++++---------- generators/app/templates/component.json.tpl | 4 +- generators/app/templates/component.jsx.tpl | 2 +- generators/app/templates/gitignore | 1 - generators/app/templates/gulpfile.js | 9 +- generators/app/templates/package.json | 4 +- generators/app/templates/util.js | 48 +++++++++ 13 files changed, 228 insertions(+), 78 deletions(-) create mode 100644 generators/app/templates/captain.js create mode 100644 generators/app/templates/util.js diff --git a/README.md b/README.md index 1b57a33..eb13813 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ -# reactive +# Reactive Biased generator for react apps. Supports sass and jade. diff --git a/generators/app/index.js b/generators/app/index.js index fcac6f0..c4effbf 100644 --- a/generators/app/index.js +++ b/generators/app/index.js @@ -55,6 +55,8 @@ module.exports = yo.generators.Base.extend({ 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'); @@ -86,6 +88,7 @@ module.exports = yo.generators.Base.extend({ // add app directories this.mkdir('src'); this.mkdir('.tmp'); + this.mkdir('.tmp/app'); this.mkdir('.tmp/components'); this.mkdir('test'); } diff --git a/generators/app/templates/app.json b/generators/app/templates/app.json index 2dbcfc9..9310df5 100644 --- a/generators/app/templates/app.json +++ b/generators/app/templates/app.json @@ -1,6 +1,11 @@ { "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", diff --git a/generators/app/templates/captain.js b/generators/app/templates/captain.js new file mode 100644 index 0000000..dde23ee --- /dev/null +++ b/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; diff --git a/generators/app/templates/compile.js b/generators/app/templates/compile.js index 87cebf6..6aab12f 100644 --- a/generators/app/templates/compile.js +++ b/generators/app/templates/compile.js @@ -3,24 +3,35 @@ 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'); + sass = require('gulp-sass'), + inject = require('gulp-inject'), + util = require('./util.js'); module.exports = { - sass: function(paths) { + scss: function(paths) { return gulp.src(paths.sources) .pipe(sass()) - .pipe(concat('build.css')) + .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)); }, @@ -30,6 +41,7 @@ module.exports = { transform: 'reactify' })) .pipe(concat(_component + '.js')) + .pipe(connect.reload()) .pipe(gulp.dest(paths.destination)); } }; diff --git a/generators/app/templates/component.jade.tpl b/generators/app/templates/component.jade.tpl index d6d6e37..291a691 100644 --- a/generators/app/templates/component.jade.tpl +++ b/generators/app/templates/component.jade.tpl @@ -1,8 +1,10 @@ html head - // Don't touch! Or it will go BOOOM. - link(rel='stylesheet', href='css/<%- name %>.css') + // Can't touch this! Or it will go BOOOM. + //- inject:css + //- endinject // Aye! Captain. + body #main-wrapper script(src='scripts/trigger.js') diff --git a/generators/app/templates/component.js b/generators/app/templates/component.js index 661ac7c..7255e16 100644 --- a/generators/app/templates/component.js +++ b/generators/app/templates/component.js @@ -8,6 +8,7 @@ var fs = require('fs'), net = require('net'), connect = require('gulp-connect'), compile = require('./compile.js'), + util = require('./util.js'), config = require('../app.json').components; var baseDir = path.resolve(__dirname, '../'); @@ -41,8 +42,7 @@ Component.prototype.add = function(_component) { fs.writeFile( path.join(_path, filename), lodash.template(template)({ - name: _component.charAt(0).toUpperCase() + _component.slice(1), - author: 'Reactive' + name: _component.charAt(0).toUpperCase() + _component.slice(1) }), function(e) { if (e) { @@ -56,15 +56,17 @@ Component.prototype.add = function(_component) { Component.prototype.remove = function(_component) { var _componentPath = path.join(path.join(baseDir, config.basePath), _component); try { - rmdir(_componentPath); + util.rmdir(_componentPath); } catch (e) { - if (e.code != 'EEXIST') { - console.error(_component + ' doesn\'t exist at ' + config.basePath); - return; + if (e.code == 'ENOENT') { + gutil.log(gutil.colors.red(_component + ' doesn\'t exist at ' + config.basePath)); + } else { + gutil.log(gutil.colors.red(_component + ' remove failed.', e)); } + return; } - console.log(_component + ' removed.'); + gutil.log(_component + ' removed.'); }; Component.prototype.info = function(_component) { @@ -72,13 +74,11 @@ Component.prototype.info = function(_component) { try { var _jsonFile = fs.readFileSync(path.join(_componentPath, 'component.json'), 'utf8'); } catch (e) { - if (e.code != 'EEXIST') { - console.error(_component + ' doesn\'t exist in ' + config.basePath); - return; - } + gutil.log(gutil.colors.red(_component + ' info failed.', e)); + return; } - console.log(_jsonFile); + gutil.log(_jsonFile); }; Component.prototype.watch = function(_component) { @@ -114,7 +114,7 @@ Component.prototype.watch = function(_component) { } try { - rmdir(_tempComponentDir); + util.rmdir(_tempComponentDir); } catch (e) { if (e.code != 'ENOENT') { gutil.log(gutil.colors.red(_component + ' watch failed.', e)); @@ -146,8 +146,8 @@ Component.prototype.watch = function(_component) { _deps.forEach(function(_dep) { _jsxDeps.push(path.join(_baseDir, _dep, '/src/jsx/*.jsx'), path.join(_baseDir, _dep, '/src/jsx/*.js')); _sassDeps.push(path.join(_baseDir, _dep, '/src/*.scss'), path.join(_baseDir, _dep, '/src/*.css')); - _tempSass = lodash.uniq(_tempSass.concat(_depMap[_dep].extSass)); - _tempJsx = lodash.uniq(_tempJsx.concat(_depMap[_dep].extJsx)); + _tempSass = lodash.uniq(_tempSass.concat(_depMap[_dep]['s-css'])); + _tempJsx = lodash.uniq(_tempJsx.concat(_depMap[_dep]['js-x'])); }); _tempSass.forEach(function(_path) { @@ -160,20 +160,13 @@ Component.prototype.watch = function(_component) { _importJsx.push(path.join(_path, '/*.jsx'), path.join(_path, '/*.js')); }); - gulp.task('compile-sass', function() { - return compile.sass({ + gulp.task('compile-scss', function() { + return compile.scss({ sources: _sassDeps.concat(_importSass), destination: path.join(_tempComponentDir, 'css') }); }); - gulp.task('compile-jade', function() { - return compile.jade({ - source: path.join(_componentDir, 'src/*.jade'), - destination: _tempComponentDir - }); - }); - /* 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() { @@ -183,6 +176,15 @@ Component.prototype.watch = function(_component) { }, 'trigger'); }); + gulp.task('compile-jade', ['compile-scss'], function() { + return compile.jade({ + ignore: '.tmp/components/' + _component, + inject: path.join(_tempComponentDir, 'css', '/*.css'), + source: path.join(_componentDir, 'src/*.jade'), + destination: _tempComponentDir + }); + }); + gulp.task('watch', function() { // Watch current component jade gulp.watch([path.join(_componentDir, '/src/*.jade')], ['compile-jade']); @@ -191,17 +193,17 @@ Component.prototype.watch = function(_component) { gulp.watch(_jsxDeps, ['compile-jsx']); // Watch current and dependency component sass - gulp.watch(_sassDeps, ['compile-sass']); + gulp.watch(_sassDeps, ['compile-scss']); // Watch external js & jsx gulp.watch(_importJsx, ['compile-jsx']); // Watch external sass - gulp.watch(_importSass, ['compile-sass']); + gulp.watch(_importSass, ['compile-scss']); }); gulp.task('connect', function() { - getPort(9000, function(port) { + util.getPort(9000, function(port) { connect.server({ root: _tempComponentDir, port: port, @@ -211,27 +213,13 @@ Component.prototype.watch = function(_component) { }); }); - gulp.start('compile-sass', 'compile-jade', 'compile-jsx', 'watch', 'connect'); + gulp.start('compile-scss', 'compile-jade', 'compile-jsx', 'watch', 'connect'); }; Component.prototype.test = function(_component) {}; Component.prototype.coverage = function(_component) {}; -// Get free port -var getPort = function(port, cb) { - var server = net.createServer(); - server.listen(port, function(err) { - server.once('close', function() { - cb(port); - }); - server.close(); - }); - server.on('error', function(err) { - getPort(port + 1, cb); - }); -}; - // Recursive dependency check var getDep = function(_baseDir, _component, _depMap) { var _jsonFile = fs.readFileSync(path.join(_baseDir, _component, 'component.json'), 'utf8'); @@ -244,24 +232,4 @@ var getDep = function(_baseDir, _component, _depMap) { } }; -// Recursive directory remove -var rmdir = function(dir) { - var list = fs.readdirSync(dir); - for (var i = 0; i < list.length; i++) { - var filename = path.join(dir, list[i]); - var stat = fs.statSync(filename); - - if (filename == '.' || filename == '..') { - // pass these files - } else if (stat.isDirectory()) { - // rmdir recursively - rmdir(filename); - } else { - // rm fiilename - fs.unlinkSync(filename); - } - } - fs.rmdirSync(dir); -}; - module.exports = Component; diff --git a/generators/app/templates/component.json.tpl b/generators/app/templates/component.json.tpl index d3b94d4..b631e98 100644 --- a/generators/app/templates/component.json.tpl +++ b/generators/app/templates/component.json.tpl @@ -4,8 +4,8 @@ "keywords" : [], "description" : "", "dependencies" : { - "extSass" : [], - "extJsx": [], + "s-css" : [], + "js-x": [], "components" : [] } } diff --git a/generators/app/templates/component.jsx.tpl b/generators/app/templates/component.jsx.tpl index 6f1584d..12aa39f 100644 --- a/generators/app/templates/component.jsx.tpl +++ b/generators/app/templates/component.jsx.tpl @@ -12,4 +12,4 @@ var <%= name %> = React.createClass({ } }); -module.exports = <%- name %>; +module.exports = <%= name %>; diff --git a/generators/app/templates/gitignore b/generators/app/templates/gitignore index fa9ec23..129aeea 100644 --- a/generators/app/templates/gitignore +++ b/generators/app/templates/gitignore @@ -2,6 +2,5 @@ node_modules dist .tmp .sass-cache -.reactive src/media/bower_components test/bower_components diff --git a/generators/app/templates/gulpfile.js b/generators/app/templates/gulpfile.js index c057730..4b06906 100644 --- a/generators/app/templates/gulpfile.js +++ b/generators/app/templates/gulpfile.js @@ -3,7 +3,8 @@ var gulp = require('gulp'), gulpCommand = require('gulp-command')(gulp); -var Component = new(require('./.reactive/component.js')); +var Component = new(require('./.reactive/component.js')), + Captain = new(require('./.reactive/captain.js')); gulp .option('component', '-a, --add ', 'New Component') @@ -30,11 +31,11 @@ gulp gulp .task('watch', function() { - console.log('watch'); + Captain.watch(); }) .task('build', function() { - console.log('build'); + Captain.build(); }) .task('test', function() { - console.log('test'); + Captain.test(); }); diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json index 78a75b9..8755083 100644 --- a/generators/app/templates/package.json +++ b/generators/app/templates/package.json @@ -9,12 +9,12 @@ "devDependencies": { "gulp": "^3.8.10", "gulp-connect": "^2.2.0", - "gulp-browserify": "^0.5.1", "gulp-sass": "^1.3.3", "gulp-command": "^0.1.1", "gulp-concat": "^2.5.0", "gulp-util": "^3.0.3", "gulp-jade": "^0.11.0", - "lodash": "^3.2.0" + "lodash": "^3.2.0", + "map-stream": "0.0.5" } } diff --git a/generators/app/templates/util.js b/generators/app/templates/util.js new file mode 100644 index 0000000..3c9e172 --- /dev/null +++ b/generators/app/templates/util.js @@ -0,0 +1,48 @@ +'use strict'; + +var net = require('net'), + path = require('path'), + gutil = require('gulp-util'), + fs = require('fs'), + map = require('map-stream'); + +// Get free port +var getPort = exports.getPort = function(port, cb) { + var server = net.createServer(); + server.listen(port, function(err) { + server.once('close', function() { + cb(port); + }); + server.close(); + }); + server.on('error', function(err) { + getPort(port + 1, cb); + }); +}; + +// Recursive directory remove +var rmdir = exports.rmdir = function(dir) { + var list = fs.readdirSync(dir); + for (var i = 0; i < list.length; i++) { + var filename = path.join(dir, list[i]); + var stat = fs.statSync(filename); + + if (filename == '.' || filename == '..') { + // pass these files + } else if (stat.isDirectory()) { + // rmdir recursively + rmdir(filename); + } else { + // rm fiilename + fs.unlinkSync(filename); + } + } + fs.rmdirSync(dir); +}; + +var using = exports.using = function() { + return map(function(file, cb) { + gutil.log('Watching ' + gutil.colors.green(file.path.replace(file.cwd + '/', ''))); + cb(null, file); + }); +} From 08debdcef3b18d1e6691b9ee43875ae46df7b59d Mon Sep 17 00:00:00 2001 From: SKatiyar Date: Sat, 5 Sep 2015 19:34:43 +0530 Subject: [PATCH 5/5] more changes --- generators/app/templates/package.json | 1 + generators/app/templates/trigger.jsx.tpl | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json index 8755083..75a2f57 100644 --- a/generators/app/templates/package.json +++ b/generators/app/templates/package.json @@ -11,6 +11,7 @@ "gulp-connect": "^2.2.0", "gulp-sass": "^1.3.3", "gulp-command": "^0.1.1", + "gulp-inject": "^1.2.0", "gulp-concat": "^2.5.0", "gulp-util": "^3.0.3", "gulp-jade": "^0.11.0", diff --git a/generators/app/templates/trigger.jsx.tpl b/generators/app/templates/trigger.jsx.tpl index 6425f1b..265df8c 100644 --- a/generators/app/templates/trigger.jsx.tpl +++ b/generators/app/templates/trigger.jsx.tpl @@ -1,5 +1,5 @@ var React = require('react'); -var <%- name %> = require('./<%- name %>.jsx'); +var <%= name %> = require('./<%= name %>.jsx'); -React.renderComponent(<<%- name %>/>, document.getElementById('main-wrapper')); +React.renderComponent(<<%= name %>/>, document.getElementById('main-wrapper'));