Pages generator rework

CHANGELOG.md

@@ -1,5 +1,12 @@
 === HEAD
 
+=== 1.0.0 (September 7, 2014)
+
+* Add pages `bootloader`
+* Move `main.js` into the project root `/app/main.js`
+* Move `js/page/` into the project root `/app/page/`
+* Rewrote `flight:page` to generate page packages (read `README.md`) 
+
 === 0.8.0 (August 20, 2014)
 
 * Upgrade to generate an app using Flight 1.2.x.

CONTRIBUTING.md

@@ -100,7 +100,7 @@ included in the project:
    # Navigate to the newly cloned directory
    cd generator-flight
    # Assign the original repo to a remote called "upstream"
-   git remote add upstream https://github.com/twitter/generator-flight
+   git remote add upstream https://github.com/flightjs/generator-flight
    ```
 
 2. If you cloned a while ago, get the latest changes from upstream:

README.md

@@ -82,14 +82,16 @@ Produces:
 │   ├── css
 │   │   └── main.css
 │   ├── img
+│   ├── page
+│   │   └── index
+│   │       ├── initialize.js
+│   │       └── style.css (optional)
 │   ├── js
-│   │   ├── component
-│   │   ├── page
-│   │   │   └── default.js
-│   │   └── main.js
+│   │   └── component
 │   ├── 404.html
 │   ├── favicon.ico
 │   ├── index.html
+│   ├── main.js
 │   └── robots.txt
 ├── node_modules
 ├── test
@@ -215,28 +217,68 @@ describeMixin('component/with_tweet_box', function () {
 
 ### flight:page
 
-Generates a page component in `app/js/page`.
+Generates a page component in `app/page/page_name/`.
 
 Example:
 
 ```
-yo flight:page settings
+yo flight:page about
 ```
 
-Produces `app/js/page/settings.js`:
+Produces:
+
+```
+`app/page/about/style.css` (optional)
+`app/page/about/index.html`
+`app/page/about/initialize.js`
+```
 
 ```js
 define(function (require) {
   // var myComponent = require('component/my_component');
 
   return initialize;
 
-  function initialize() {
+  function initialize(flight_settings) {
     // myComponent.attachTo(document);
   }
 });
 ```
 
+#### flight_settings
+
+Flight pages' `initialize` receives an (optional) settings object that can be consumed
+when attaching components to DOM elements.
+
+Example:
+
+```js
+define(function (require) {
+  var myComponent = require('component/my_component');
+
+  return initialize;
+
+  function initialize(flight_settings) {
+    myComponent.attachTo(document, {
+      'message': flight_settings.page_message
+    });
+  }
+});
+```
+
+`flight_settings` can be defined by setting the value of the `#flight-settings` hidden input element to be a JSON encoded string
+
+Example:
+
+In `app/page/page_name/index.html`:
+
+```html
+Hello world
+
+<input class="flight-initialize" type="hidden" value="page/page_name/initialize"> 
+<input id="flight-settings" type="hidden" value="{&quot;page_message&quot;:&quot;welcome to the jungle&quot;}">
+```
+
 ### flight:all
 
 Shortcut that runs `flight:app`, `flight:component my_component`, and
@@ -266,6 +308,6 @@ review the [guidelines for contributing](CONTRIBUTING.md).
 
 ## License
 
-Copyright 2013 Twitter, Inc and other contributors.
+Copyright 2014 Twitter, Inc and other contributors.
 
-Licensed under the MIT License.
+Licensed under the MIT License.

lib/generators/app/index.js

@@ -2,6 +2,7 @@
  * Module dependencies.
  */
 
+var askFor = require('../askFor');
 var fs = require('fs');
 var path = require('path');
 var pkg = require('./../../../package.json');
@@ -25,6 +26,8 @@ function Generator() {
 
   this.argument('name', { type: String, required: false });
   this.name = this.name || path.basename(process.cwd());
+  this.argument('pageName', { type: String, required: false });
+  this.pageName = this.pageName || 'index';
   this.genVersion = pkg.version;
 
   this.sourceRoot(path.join(__dirname, '../../templates/'));
@@ -42,59 +45,7 @@ util.inherits(Generator, yeoman.generators.Base);
  * @api public
  */
 
-Generator.prototype.askFor = function askFor() {
-  var cb = this.async();
-
-  var prompts = [
-    {
-      type: 'confirm',
-      name: 'bootstrap',
-      message: 'Include Bootstrap 3?'
-    },
-    {
-      type: 'confirm',
-      name: 'bootstrapTheme',
-      message: 'Include Bootstrap theme?',
-      when: function (answers) {
-        if (answers.bootstrap) return true;
-        return false;
-      }
-    },
-    {
-      type: 'confirm',
-      name: 'normalize',
-      message: 'Include Normalize.css?',
-      when: function (answers) {
-        if (answers.bootstrap) return false;
-        return true;
-      }
-    },
-    {
-      type: 'confirm',
-      name: 'analytics',
-      message: 'Include the Google Analytics snippet?'
-    },
-    {
-      type: 'input',
-      name: 'analyticsCode',
-      message: 'What\'s your Google Analytics UA code?',
-      when: function (answers) {
-        if (answers.analytics) return true;
-        return false;
-      }
-    }
-  ];
-
-  this.prompt(prompts, function (props) {
-    this.bootstrap = props.bootstrap;
-    this.bootstrapTheme = props.bootstrapTheme;
-    this.normalize = props.normalize;
-    this.analytics = props.analytics;
-    this.analyticsCode = props.analyticsCode;
-
-    cb();
-  }.bind(this));
-};
+Generator.prototype.askFor = askFor;
 
 /**
  * Setup the default directory structure
@@ -108,7 +59,7 @@ Generator.prototype.setupEnv = function setupEnv() {
   this.mkdir('app/img');
   this.mkdir('app/js');
   this.mkdir('app/js/component');
-  this.mkdir('app/js/page');
+  this.mkdir('app/page');
   this.mkdir('test');
   this.mkdir('test/spec');
 };
@@ -142,10 +93,13 @@ Generator.prototype.projectFiles = function projectFiles() {
   this.copy('application/app/favicon.ico', 'app/favicon.ico');
   this.copy('application/app/robots.txt', 'app/robots.txt');
   this.template('application/app/404.html', 'app/404.html');
-  this.template('application/app/index.html', 'app/index.html');
+  this.template('application/app/page.html', 'app/index.html');
   this.template('application/app/main.css', 'app/css/main.css');
-  this.template('application/app/main.js', 'app/js/main.js');
-  this.template('page.js', 'app/js/page/default.js');
+  this.template('application/app/main.js', 'app/main.js');
+  this.template('page.js', 'app/page/' + this.pageName + '/initialize.js');  
+  if (this.pageCSS) {
+    this.copy('application/app/page.css', 'app/page/' + this.pageName + '/style.css');
+  }
 
   // Create in generated 'test' dir
   this.copy('application/test/test-main.js', 'test/test-main.js');

lib/generators/askFor.js

@@ -0,0 +1,71 @@
+/**
+ * Module exports.
+ */
+
+module.exports = askFor;
+
+/**
+ * askFor - shared across generators
+ *
+ * @api public
+ */
+
+function askFor() {
+  var cb = this.async();
+
+  var prompts = [
+    {
+      type: 'confirm',
+      name: 'bootstrap',
+      message: 'Include Bootstrap 3?'
+    },
+    {
+      type: 'confirm',
+      name: 'bootstrapTheme',
+      message: 'Include Bootstrap theme?',
+      when: function (answers) {
+        if (answers.bootstrap) return true;
+        return false;
+      }
+    },
+    {
+      type: 'confirm',
+      name: 'normalize',
+      message: 'Include Normalize.css?',
+      when: function (answers) {
+        if (answers.bootstrap) return false;
+        return true;
+      }
+    },
+    {
+      type: 'confirm',
+      name: 'pageCSS',
+      message: 'Generate an empty stylesheet for the page?'
+    },
+    {
+      type: 'confirm',
+      name: 'analytics',
+      message: 'Include the Google Analytics snippet?'
+    },
+    {
+      type: 'input',
+      name: 'analyticsCode',
+      message: 'What\'s your Google Analytics UA code?',
+      when: function (answers) {
+        if (answers.analytics) return true;
+        return false;
+      }
+    }
+  ];
+
+  this.prompt(prompts, function (props) {
+    this.bootstrap = props.bootstrap;
+    this.bootstrapTheme = props.bootstrapTheme;
+    this.normalize = props.normalize;
+    this.pageCSS = props.pageCSS;
+    this.analytics = props.analytics;
+    this.analyticsCode = props.analyticsCode;
+
+    cb();
+  }.bind(this));
+}

lib/generators/page/index.js

@@ -2,6 +2,7 @@
  * Module dependencies.
  */
 
+var askFor = require('../askFor');
 var path = require('path');
 var util = require('util');
 var yeoman = require('yeoman-generator');
@@ -26,6 +27,14 @@ function Generator() {
 
 util.inherits(Generator, yeoman.generators.Base);
 
+/**
+ * Prompts for information to seed the generated app
+ *
+ * @api public
+ */
+
+Generator.prototype.askFor = askFor;
+
 /**
  * Generate files for a Flight page
  *
@@ -34,5 +43,11 @@ util.inherits(Generator, yeoman.generators.Base);
 
 Generator.prototype.createPageFiles = function createPageFiles() {
   this.name = this.name || 'my_page';
-  this.template('page.js', 'app/js/page/' + this.name + '.js');
+  this.pageName = this.pageName || this.name;
+  this.mkdir('app/page/' + this.pageName);  
+  this.template('page.js', 'app/page/' + this.pageName + '/initialize.js');
+  this.template('application/app/page.html', 'app/page/' + this.pageName + '/index.html');
+  if (this.pageCSS) {
+    this.copy('application/app/page.css', 'app/page/' + this.pageName + '/style.css');
+  }
 };