gillesruppert/README.md

## README.md

      
    Raw
  

              README.md
            
          
    {COMPONENT_NAME}

component description and usage
Images supporting the documentation or more extensive documentation should go
into the docs folder.
Working example should go into the example folder.
Tests go into the test folder. Should just consist of main.test.js. If you
need more, your component might be too big!
package.json contains the development dependencies, such as testacular and
expect.js. Usually, npm install runs bower install on postinstall.
component.json contains all the client-side dependencies to make the code work.
N.B: sinon.js is part of the bower dependencies as the npm version does
not work in the browser!
main.js - component JavaScript code
style.css - component.css. Should be the least amount of CSS to make the
component show on screen. Preferably no pre-processor should be used.
template.html - template for the component
testacular.conf.js - configuration for the testacular test runner. Should only
need amendment if the code structure is different from the blueprint

  
## component.json
{
    "name": "{COMPONENT_NAME}",
    "version": "0.0.0",
    "main": [
        // all the component files go here. There should not be more than
        // 1 file for each type. Remove this comment when done!
        "./main.js",
        "./style.css",
        "./template.html"
    ],
    "dependencies": {
        // client-side component dependencies. Look at bower for details! i.e:
        // "jquery": "~1.8.3",
        // "underscore": "~1.4.3",
        // "backbone": "~0.9.9",
        // "requirejs": "~2.1.2",
        // "sinon.js": "*"
    }
}

## DUMMY


## index.html
<!DOCTYPE html>
<html lang="en-gb">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>{COMPONENT_NAME} example</title>
        <link rel="stylesheet" type="text/css" href="../style.css">
        <script type="text/javascript" charset="utf-8">
            // configuration for requirejs, i.e.
            require = {
                baseUrl: '../',
//                paths: {
//                    jquery: './components/jquery/jquery',
//                    underscore: './components/underscore/underscore',
//                    backbone: './components/backbone/backbone'
//                },
//                shim: {
//                    jquery: {
//                        exports: 'jQuery'
//                    },
//                    underscore: {
//                        exports: '_'
//                    },
//                    backbone: {
//                        deps: ['jquery', 'underscore'],
//                        exports: 'Backbone'
//                    }
//                }
            }
        </script>
        <script src="../components/requirejs/require.js"></script>
        <style>
            /* styles that are example specific */
            .clear-button-container {
                width: 300px;
                height: 25px;
            }
        </style>

    </head>
    <body>
        <h1>Example page for ClearInput</h1>
        <p>To view this page in a browser, open the file in a browser (make sure the browser can do XHR requests on the file system) or set up a server pointing to the root project and go to http://localhost:PORT_NUMBER/example/</p>

        <!-- html necessary for the example goes below this -->

        <script>
            require(['./main'], function (COMPONENT_NAME) {
                // show basic usage of the component
            });
        </script>

    </body>
</html>

## main.js
/*global define */
define(function (require) {
    "use strict";

    // code and return goes here
});

## main.test.js
/*jslint browser: true, nomen: true */
/*globals _, async, sinon, define, beforeEach, before, after, afterEach, mocha, dump, window: false, $: false, require: false, Backbone: false, describe, it, expect, window*/

mocha.setup({ ignoreLeaks: true });
require.config({
    baseUrl: '/base',
    paths: {
        // configure paths for the component dependencies, i.e.
        // jquery: './components/jquery/jquery',
        // underscore: './components/underscore/underscore',
        // backbone: './components/backbone/backbone'
    },
    shim: {
        // configure shims for the non AMD dependencies, i.e.
        // jquery: {
        //     exports: 'jQuery'
        // },
        // underscore: {
        //     exports: '_'
        // },
        // backbone: {
        //     deps: ['jquery', 'underscore'],
        //     exports: 'Backbone'
        // }
    }
});

require([ 'main' ], function ({{COMPONENT_NAME}}) {
    "use strict";

    describe('{COMPONENT_NAME}', function () {
        // all the tests go here
    });


    // start the test runner (last thing!);
    window.__testacular__.start();
});

## package.json
{
  "name": "{COMPONENT_NAME}",
  "version": "0.0.0",
  "description": "{COMPONENT_DESCRIPTION}",
  "main": "main.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "postinstall": "bower install",
    "test": "./node_modules/.bin/testacular start --single-run --browsers PhantomJS"
  },
  "repository": {
    "type": "git",
    "url": "{GIT_URL}"
  },
  "keywords": [ ],
  "author": "",
  "license": "BSD",
  "readmeFilename": "README.md",
  "devDependencies": {
    "testacular": "~0.5.8",
    "expect.js": "~0.2.0"
  },
  "private": true
}

## style.css
/*
 component css
 Should only include the most basic layout styles for the component,
 preferably in plain CSS, so that the preprocessor doesn't matter
*/

## template.html
<!-- html template -->

## testacular.conf.js
// Testacular configuration
// Generated on Mon Jan 21 2013 15:39:08 GMT+0100 (CET)


// base path, that will be used to resolve files and exclude
basePath = '.';


// list of files / patterns to load in the browser
files = [
  MOCHA,
  MOCHA_ADAPTER,
  REQUIRE,
  REQUIRE_ADAPTER,
  './node_modules/expect.js/expect.js',
  './components/sinon.js/sinon.js',
  './test/main.test.js',
  { pattern: './components/**/*.js', included: false, watched: false },
  { pattern: './main.js', included: false }
];


// list of files to exclude
exclude = [

];


// test results reporter to use
// possible values: 'dots', 'progress', 'junit'
reporters = ['progress'];


// web server port
port = 8080;


// cli runner port
runnerPort = 9100;


// enable / disable colors in the output (reporters and logs)
colors = true;


// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;


// enable / disable watching file and executing tests whenever any file changes
autoWatch = false;


// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = [];


// If browser does not capture in given timeout [ms], kill it
captureTimeout = 60000;


// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;
	{
	"name": "{COMPONENT_NAME}",
	"version": "0.0.0",
	"main": [
	// all the component files go here. There should not be more than
	// 1 file for each type. Remove this comment when done!
	"./main.js",
	"./style.css",
	"./template.html"
	],
	"dependencies": {
	// client-side component dependencies. Look at bower for details! i.e:
	// "jquery": "~1.8.3",
	// "underscore": "~1.4.3",
	// "backbone": "~0.9.9",
	// "requirejs": "~2.1.2",
	// "sinon.js": "*"
	}
	}
	<!DOCTYPE html>
	<html lang="en-gb">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>{COMPONENT_NAME} example</title>
	<link rel="stylesheet" type="text/css" href="../style.css">
	<script type="text/javascript" charset="utf-8">
	// configuration for requirejs, i.e.
	require = {
	baseUrl: '../',
	// paths: {
	// jquery: './components/jquery/jquery',
	// underscore: './components/underscore/underscore',
	// backbone: './components/backbone/backbone'
	// },
	// shim: {
	// jquery: {
	// exports: 'jQuery'
	// },
	// underscore: {
	// exports: '_'
	// },
	// backbone: {
	// deps: ['jquery', 'underscore'],
	// exports: 'Backbone'
	// }
	// }
	}
	</script>
	<script src="../components/requirejs/require.js"></script>
	<style>
	/* styles that are example specific */
	.clear-button-container {
	width: 300px;
	height: 25px;
	}
	</style>

	</head>
	<body>
	<h1>Example page for ClearInput</h1>
	<p>To view this page in a browser, open the file in a browser (make sure the browser can do XHR requests on the file system) or set up a server pointing to the root project and go to http://localhost:PORT_NUMBER/example/</p>

	<!-- html necessary for the example goes below this -->

	<script>
	require(['./main'], function (COMPONENT_NAME) {
	// show basic usage of the component
	});
	</script>

	</body>
	</html>
	/global define /
	define(function (require) {
	"use strict";

	// code and return goes here
	});
	/jslint browser: true, nomen: true /
	/globals _, async, sinon, define, beforeEach, before, after, afterEach, mocha, dump, window: false, $: false, require: false, Backbone: false, describe, it, expect, window/

	mocha.setup({ ignoreLeaks: true });
	require.config({
	baseUrl: '/base',
	paths: {
	// configure paths for the component dependencies, i.e.
	// jquery: './components/jquery/jquery',
	// underscore: './components/underscore/underscore',
	// backbone: './components/backbone/backbone'
	},
	shim: {
	// configure shims for the non AMD dependencies, i.e.
	// jquery: {
	// exports: 'jQuery'
	// },
	// underscore: {
	// exports: '_'
	// },
	// backbone: {
	// deps: ['jquery', 'underscore'],
	// exports: 'Backbone'
	// }
	}
	});

	require([ 'main' ], function ({{COMPONENT_NAME}}) {
	"use strict";

	describe('{COMPONENT_NAME}', function () {
	// all the tests go here
	});


	// start the test runner (last thing!);
	window.__testacular__.start();
	});
	{
	"name": "{COMPONENT_NAME}",
	"version": "0.0.0",
	"description": "{COMPONENT_DESCRIPTION}",
	"main": "main.js",
	"directories": {
	"test": "test"
	},
	"scripts": {
	"postinstall": "bower install",
	"test": "./node_modules/.bin/testacular start --single-run --browsers PhantomJS"
	},
	"repository": {
	"type": "git",
	"url": "{GIT_URL}"
	},
	"keywords": [ ],
	"author": "",
	"license": "BSD",
	"readmeFilename": "README.md",
	"devDependencies": {
	"testacular": "~0.5.8",
	"expect.js": "~0.2.0"
	},
	"private": true
	}
	/*
	component css
	Should only include the most basic layout styles for the component,
	preferably in plain CSS, so that the preprocessor doesn't matter
	*/
	// Testacular configuration
	// Generated on Mon Jan 21 2013 15:39:08 GMT+0100 (CET)


	// base path, that will be used to resolve files and exclude
	basePath = '.';


	// list of files / patterns to load in the browser
	files = [
	MOCHA,
	MOCHA_ADAPTER,
	REQUIRE,
	REQUIRE_ADAPTER,
	'./node_modules/expect.js/expect.js',
	'./components/sinon.js/sinon.js',
	'./test/main.test.js',
	{ pattern: './components/*/.js', included: false, watched: false },
	{ pattern: './main.js', included: false }
	];


	// list of files to exclude
	exclude = [

	];


	// test results reporter to use
	// possible values: 'dots', 'progress', 'junit'
	reporters = ['progress'];


	// web server port
	port = 8080;


	// cli runner port
	runnerPort = 9100;


	// enable / disable colors in the output (reporters and logs)
	colors = true;


	// level of logging
	// possible values: LOG_DISABLE \|\| LOG_ERROR \|\| LOG_WARN \|\| LOG_INFO \|\| LOG_DEBUG
	logLevel = LOG_INFO;


	// enable / disable watching file and executing tests whenever any file changes
	autoWatch = false;


	// Start these browsers, currently available:
	// - Chrome
	// - ChromeCanary
	// - Firefox
	// - Opera
	// - Safari (only Mac)
	// - PhantomJS
	// - IE (only Windows)
	browsers = [];


	// If browser does not capture in given timeout [ms], kill it
	captureTimeout = 60000;


	// Continuous Integration mode
	// if true, it capture browsers, run tests and exit
	singleRun = false;