Add template for sample .info applications

templates/sample.js

@@ -0,0 +1,56 @@
+var TemplateBase = require("../lib/template-base.js").TemplateBase;
+var AppTemplate = require("./app").Template;
+var ArgumentError = require("../lib/error.js").ArgumentError;
+var path = require('path');
+
+var _fromDashesToLowerCamel = function(name) {
+    var s1 = name.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+    s1 = s1[0].toLowerCase() + s1.slice(1);
+    return s1;
+};
+
+var _fromDashesToUpperCamel = function(name) {
+    var s1 = name.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+    s1 = s1[0].toUpperCase() + s1.slice(1);
+    return s1;
+};
+
+
+exports.Template = Object.create(AppTemplate, {
+
+    commandDescription: {
+        value: "sample"
+    },
+
+    destination: {
+        value: "ui"
+    },
+
+    didSetOptions: {
+        value: function (options) {
+            if (!options.packageName) {
+                options.packageName = path.basename(options.packageHome);
+            }
+            if (!options.relativePackageLocation) {
+                options.relativePackageLocation = path.relative(options.destination, options.packageHome);
+            }
+            if (options.name) {
+                options.originalName = options.name;
+                options.componentName = _fromDashesToLowerCamel(options.name);
+                options.applicationName = _fromDashesToUpperCamel(options.name);
+            } else {
+                throw new ArgumentError("Required name option missing");
+            }
+        }
+    },
+
+    finish: {
+        value: function(destination) {
+            var self = this;
+            return TemplateBase.finish.call(this).then(function() {
+                console.log("# "+ self.options.name +".info created and installed with dependency mappings");
+            });
+        }
+    },
+
+});

templates/sample/__name__.info/sample/.editorconfig

@@ -0,0 +1,11 @@
+# http://EditorConfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true

templates/sample/__name__.info/sample/.gitignore

@@ -0,0 +1,37 @@
+### General ###
+.DS_Store
+Thumbs.db
+report/
+out/
+temp/
+tmp/
+.tmp
+*.tmp
+*.tmp.*
+log.txt
+*.log
+
+## jsdoc
+/doc
+
+### SublimeText ###
+*.sublime-project
+*.sublime-workspace
+
+### Intellij IDE ###
+.idea/
+atlassian-ide-plugin.xml
+
+### VisualStudioCode ###
+.vscode/*
+.vscode-upload.json
+
+### TextMate ###
+*.tmproj
+*.tmproject
+tmtags
+
+### Node ###
+npm-debug.log*
+.npmignore
+node_modules/

templates/sample/__name__.info/sample/LICENSE.md

@@ -0,0 +1,3 @@
+{{#copyright}}
+{{{copyright}}}
+{{/copyright}}

templates/sample/__name__.info/sample/README.md

@@ -0,0 +1,101 @@
+
+This readme file provides a brief overview of the file and folder structure
+included in the default MontageJS project directory.
+
+>IMPORTANT: Be sure to replace the contents of this readme file with information
+about the final application before deploying the application or passing it on to
+a client.
+
+Project Directory
+============
+
+The default project directory includes the following files and folders:
+
+* assets/  -  Contains global stylesheets and images for the application.
+* index.html  -  Is the entry-point document for the application. 
+* node_modules/  -  Contains the code dependencies required in development.
+
+    Includes Montage, the core framework, and Digit, a mobile-optimized user
+    interface widget set by default. Since MontageJS uses the CommonJS module 
+    system, you can leverage the npm ecosystem for additional modules. To add 
+    dependencies (e.g., foo), use `npm install foo` in the project directory.
+
+    NOTE: All packages in this directory must be included as dependencies 
+    in package.json.
+
+* package.json  -  Describes the application and the dependencies included in 
+            the node_modules directory.
+* README.md  -  The default readme file.
+* run-tests.html  -  Is a page to run Jasmine tests manually in the browser.
+* test/  -  Contains tests for the application.
+
+    By default, this directory includes all.js, a module that points the test runner
+    to all jasmine specs.
+
+* ui/  -  Contains the application user interface components. 
+
+    By default, this directory contains two components: main.reel (the Main
+    user interface component) and version.reel (which displays the current
+    MontageJS version).
+
+* core/  -  Contains the core modules of the application logic.
+
+In development, you can expand this project directory as necessary; for example,
+depending on the project you may want to add the following folders:
+
+* locale/  -  For localized content.
+* scripts/  -  For JS libraries that do not support the CommonJS exports object
+           and, therefore, have to be loaded using a `<script>` tag.
+
+Unit Testing
+=========
+
+MontageJS uses some pure unit tests that are straightforward [Jasmine specs][1].
+
+To install the test code, run `npm install` in your project folder. This installs the 
+the [montage-testing][2] package, which adds some useful utilities for writing 
+jasmine tests. You will need the file run-tests.html.
+
+For an example of how we implement unit testing, see the [digit][3] repository:
+
+* [run-tests][4] loads our test environment.
+* `data-module="test/all"` inside the final script tag tells the system to load [test/all.js][5].
+* all.js specifies a list of module ids for the runner to execute.
+
+>Note that in this example, all the tests load a page in an iframe using 
+`TestPageLoader.queueTest()`. These are akin to integration tests since they test 
+the component in a real environment.
+
+We also test some components by [mocking their dependencies][6].
+
+Documentation
+============
+
+Here are some links you may find helpful:
+
+* [API Reference][7]
+* [Documentation][8]
+* [FAQ][9]
+
+Contact
+======
+
+* Got questions? Join us on [irc.freenode.net#montage][10].
+* Got feedback or want to report a bug? Let us know by creating a new [Github issue][11].
+* Want to contribute? [Pull-requests][12] are more than welcome.
+
+[1]: https://github.com/montagejs/montage/blob/master/test/core/super-spec.js        "Jasmine specs"
+[2]: https://github.com/montagejs/montage-testing        "montage-testing"
+[3]: https://github.com/montagejs/digit        "digit"
+[4]: https://github.com/montagejs/digit/blob/master/run-tests.html        "run-tests"
+[5]: https://github.com/montagejs/digit/tree/master/test        "test/all.js"
+[6]: https://github.com/montagejs/montage/blob/master/test/base/abstract-button-spec.js        "mocking their dependencies"
+[7]: http://montagejs.org/api/        "API Reference"
+[8]: http://montagejs.org/docs/        "Documentation"
+[9]: http://montagejs.org/docs/faq.html        "FAQ"
+[10]: http://webchat.freenode.net/?channels=montage        "irc.freenode.net#montage"
+[11]: https://github.com/montagejs/montage/issues        "Github issue"
+[12]: https://github.com/montagejs/montage/pulls        "Pull-requests"
+
+Last edited: November 14, 2013
+

templates/sample/__name__.info/sample/assets/style/style.css

@@ -0,0 +1,16 @@
+{{#copyright}}/* {{{copyright}}} */
+
+{{/copyright}}
+
+/* 
+ * This file is reserved for your global style rules. 
+ */
+
+html {
+    font-family: sans-serif;
+    color: #333;
+}
+
+body {
+    margin: 0; /* Remove default margin */
+}

templates/sample/__name__.info/sample/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+{{#copyright}}<!--  {{{copyright}}} -->
+{{/copyright}}
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel=manifest href=./manifest.json>
+    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
+    <meta name="apple-mobile-web-app-title" content="{{name}}">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="assets/icons/apple-touch-icon-152x152-precomposed.png">
+    <!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
+    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="assets/icons/apple-touch-icon-120x120-precomposed.png">
+    <!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
+    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="assets/icons/apple-touch-icon-76x76-precomposed.png">
+    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+    <link rel="apple-touch-icon-precomposed" href="assets/icons/apple-touch-icon-precomposed.png">
+    <!-- For Android 3.x+ devices: -->
+    <link rel="icon" sizes="196x196" href="assets/icons/apple-touch-icon.png">
+
+    <title>{{name}}</title>
+
+    <link rel="stylesheet" href="assets/style/style.css" />
+
+    <script src="{{relativePackageLocation}}/../../node_modules/montage/montage.js" async></script>
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "prototype": "montage/ui/loader.reel"
+        }
+    }
+    </script>
+</head>
+<body>
+    <span class="loading"></span>
+</body>
+</html>

templates/sample/__name__.info/sample/manifest.json

@@ -0,0 +1,27 @@
+{
+  "lang": "en",
+  "name": "{{name}}",
+  "short_name": "{{name}}",
+  "description": "{{description}}",
+  "start_url": "./?utm_source=homescreen",
+  "icons": [
+    {
+      "src": "./assets/icons/apple-touch-icon-120x120-precomposed.png",
+      "sizes": "120x120",
+      "type": "image/png"
+    },
+    {
+      "src": "./assets/icons/apple-touch-icon-152x152-precomposed.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "./assets/icons/apple-touch-icon-76x76-precomposed.png",
+      "sizes": "76x76",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#000",
+  "background_color": "#fff",
+  "display": "standalone"
+}

templates/sample/__name__.info/sample/package.json

@@ -0,0 +1,9 @@
+{
+    "name": "{{name}}-sample",
+    "version": "0.1.0",
+    "description": "{{description}}",
+    "mappings": {
+        "montage": "{{relativePackageLocation}}/../../node_modules/montage",
+        "{{packageName}}": "{{relativePackageLocation}}/../../"
+    }
+}

templates/sample/__name__.info/sample/ui/main.reel/main.css

@@ -0,0 +1,4 @@
+{{#copyright}}/* {{{copyright}}} */
+
+{{/copyright}}
+.Main {}

templates/sample/__name__.info/sample/ui/main.reel/main.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+{{#copyright}}<!--  {{{copyright}}} -->
+{{/copyright}}
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>Main</title>
+    <link rel="stylesheet" type="text/css" href="main.css">
+
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "values": {
+                    "element": {"#": "main"}
+                }
+            },
+
+            "{{componentName}}": {
+                "prototype": "{{packageName}}/{{destination}}/{{name}}.reel",
+                "values": {
+                    "element": {"#": "{{componentName}}"}
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div data-montage-id="main" class="Main">
+        <div data-montage-id="{{componentName}}"></div>
+    </div>
+</body>
+</html>

templates/sample/__name__.info/sample/ui/main.reel/main.js

@@ -0,0 +1,18 @@
+{{#copyright}}/* {{{copyright}}} */
+
+{{/copyright}}/**
+ * @module ui/main.reel
+ */
+var Component = require("montage/ui/component").Component;
+
+/**
+ * @class Main
+ * @extends Component
+ */
+exports.Main = Component.specialize(/** @lends Main# */ {
+    constructor: {
+        value: function Main() {
+            this.super();
+        }
+    }
+});