Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

made design changes

  • Loading branch information...
commit 7d0f71082d006c0eb9c7d53b743a089bbb51135b 1 parent 6fc58bd
Andy Chung authored
View
47 README.md
@@ -1,28 +1,19 @@
-# RequireJS
-
-RequireJS loads plain JavaScript files as well as more defined modules. It is optimized for in-browser use, including in [a Web Worker](requirejs/tree/master/docs/api.md#webworker), but it can be used in other JavaScript environments, like Rhino and [Node](requirejs/tree/master/docs/node.md). It implements the [Asynchronous Module](http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition) API.
-
-RequireJS uses plain script tags to load modules/files, so it should allow for easy debugging. It can be used [simply to load existing JavaScript files](requirejs/tree/master/docs/api.md#jsfiles), so you can add it to your existing project without having to re-write your JavaScript files.
-
-RequireJS includes [an optimization tool](requirejs/tree/master/docs/optimization.md) you can run as part of your packaging steps for deploying your code. The optimization tool can combine and minify your JavaScript files to allow for better performance.
-
-If the JavaScript file defines a JavaScript module via [define()](requirejs/tree/master/docs/api.md#define), then there are other benefits RequireJS can offer: [better CommonJS support](requirejs/tree/master/docs/commonjs.md) and [loading multiple versions](requirejs/tree/master/docs/api.md#multiversion) of a module in a page. RequireJS also allows for [module modifiers](requirejs/tree/master/docs/api.md#modifiers) and has a plugin system that supports features like [i18n string bundles](requirejs/tree/master/docs/api.md#i18n), and [text file dependencies](requirejs/tree/master/docs/api.md#text).
-
-RequireJS does not have any dependencies on a JavaScript framework. It is dual-licensed -- new BSD or MIT.
-
-The standard require.js file is around 5KB when minified via Closure Compiler and gzipped.
-
-RequireJS works in IE 6+, Firefox 2+, Safari 3.2+, Chrome 3+, and Opera 10+.
-
-Latest Release: [0.15.0](http://requirejs.org/docs/download.html)
-
-* [Start](requirejs/tree/master/docs/start.md)
- * [Using it with jQuery](requirejs/tree/master/docs/jquery.md)
-* [Download](requirejs/tree/master/docs/download.md)
-* [API](requirejs/tree/master/docs/api.md)
-* [Optimization](requirejs/tree/master/docs/optimization.md)
-* [Why](requirejs/tree/master/docs/why.md)
-* [Requirements](requirejs/tree/master/docs/requirements.md)
-* [History](requirejs/tree/master/docs/history.md)
-* [Get involved or ask questions](http://groups.google.com/group/requirejs)
-* [Blog](http://tagneto.blogspot.com)
+<div id="intro" class="mono">
+ <p>/* ---</p>
+
+ <p>RequireJS is a JavaScript file and module loader. It is optimized for
+ in-browser use, but it can be used in other JavaScript environments,
+ like Rhino and <a href="requirejs/tree/master/docs/node.md">Node</a>. Using
+ RequireJS will improve the speed and quality of your code.</p>
+
+ <p>
+ IE 6+ .......... compatible &#x2714;<br>
+ Safari 3.2 ..... compatible &#x2714;<br>
+ Chrome 3+ ...... compatible &#x2714;<br>
+ Opera 10+ ...... compatible &#x2714;
+ </p>
+
+ <p><a href="requirejs/tree/master/docs/start.md">Get started</a> then check out the <a href="requirejs/tree/master/docs/api.md">API</a>.</p>
+
+ <p>--- */</p>
+</div>
View
10 dist/dist-site.js
@@ -26,11 +26,14 @@ load("../build/jslib/fileUtil.js");
var files, i, mdFile, htmlFile, fileContents,
runtime = Packages.java.lang.Runtime.getRuntime(),
- process, preContents, postContents, h1, homePath, cssPath, length, j, isTopPage = false;
+ process, preContents, postContents, h1, homePath, cssPath,
+ jsPath, length, j, isTopPage = false;
//Copy all the text files to a dist directory
-fileUtil.deleteFile("./dist-site/");
+//fileUtil.deleteFile("./dist-site/");
fileUtil.copyFile("main.css", "./dist-site/main.css");
+fileUtil.copyFile("init.js", "./dist-site/init.js");
+fileUtil.copyDir("i/", "./dist-site/i/", /\w/);
fileUtil.copyDir("fonts", "./dist-site/fonts", /\w/);
fileUtil.copyFile("../README.md", "./dist-site/index.md");
fileUtil.copyDir("../docs/", "./dist-site/docs/", /\w/);
@@ -73,6 +76,7 @@ for (i = 0; (mdFile = files[i]); i++) {
isTopPage = true;
homePath = "./";
cssPath = "main.css";
+ jsPath = "init.js";
} else {
isTopPage = false;
length = homePath.split("/").length;
@@ -81,9 +85,11 @@ for (i = 0; (mdFile = files[i]); i++) {
homePath += "../";
}
cssPath = homePath + "main.css";
+ jsPath = homePath + "init.js";
}
fileContents = fileContents.replace(/HOMEPATH/, homePath);
fileContents = fileContents.replace(/\main\.css/, cssPath);
+ fileContents = fileContents.replace(/\init\.js/, jsPath);
//If it is the top page, adjust the header links
View
BIN  dist/fonts/Inconsolata.ttf
Binary file not shown
View
0  dist/fonts/PT-Sans/PT_Sans.ttf 100755 → 100644
File mode changed
View
0  dist/fonts/PT-Sans/PT_Sans_Bold.ttf 100755 → 100644
File mode changed
View
0  dist/fonts/PT-Sans/PT_Sans_Bold_Italic.ttf 100755 → 100644
File mode changed
View
0  dist/fonts/PT-Sans/PT_Sans_Caption.ttf 100755 → 100644
File mode changed
View
0  dist/fonts/PT-Sans/PT_Sans_Caption_Bold.ttf 100755 → 100644
File mode changed
View
0  dist/fonts/PT-Sans/PT_Sans_Italic.ttf 100755 → 100644
File mode changed
View
0  dist/fonts/PT-Sans/PT_Sans_Narrow.ttf 100755 → 100644
File mode changed
View
0  dist/fonts/PT-Sans/PT_Sans_Narrow_Bold.ttf 100755 → 100644
File mode changed
View
0  dist/fonts/PT-Sans/Paratype PT Sans Free Font License.txt 100755 → 100644
File mode changed
View
BIN  dist/i/arrow-x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  dist/i/arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  dist/i/dot.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  dist/i/grid.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  dist/i/line.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  dist/i/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  dist/i/sprite.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
27 dist/init.js
@@ -0,0 +1,27 @@
+$(document).ready(function($) {
+
+ // set panel min-height to full browser height
+ $(window).bind("load resize", function(){
+ var h = $(window).height();
+ $("#wrapper, #grid, #navBg, #content").css({ "min-height" : (h) });
+ });
+
+ // toggle grid
+
+ $("#grid").hide();
+
+ $(document.documentElement).keyup(function (event) {
+ if (event.keyCode == 71) {
+ $("#grid").fadeToggle(100);
+ }
+ });
+
+ // if window is larger than #nav then #nav == fixed, if #nav is larger than window #nav == relative
+ $(window).bind("load resize", function(){
+ var w = jQuery(window).height();
+ var h = jQuery('#nav').outerHeight();
+ jQuery("#nav").css("position",(w < h) ? ("relative") : ("fixed"));
+ });
+
+ // done!
+});
View
636 dist/main.css
@@ -1,89 +1,223 @@
-
@font-face {
- font-family: PT-Sans;
- src: url("fonts/PT-Sans/PT_Sans.ttf");
+ font-family: Inconsolata;
+ src: url("fonts/Inconsolata.ttf");
}
-html, body {
- font-family: PT-Sans, sans-serif;
- margin: 0px;
- padding: 0px;
- /* font-size: 100%; */
- background: white;
+* {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
}
body {
- margin: 2em auto;
- width: 980px;
+ font-size: 12px;
+ line-height: 21px;
+ background-color: #fff;
+ font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
+ color: #0a0a0a;
}
-pre {
- border: 1px solid gray;
- padding: 0.5em;
- margin-left: 2em;
- background-color: #F0F0F0;
+#wrapper {
+ margin: 0;
}
-#nav {
- width: 160px;
- float: left;
- padding: 80px 0;
- list-style: none;
- text-align: right;
+#grid {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 796px;
+ background-image: url("i/grid.png");
+ z-index: 100;
}
-#nav a:link, #nav a:visited {
- text-decoration: none;
+pre {
+ line-height: 18px;
+ font-size: 13px;
+ margin: 7px 0 21px;
+ padding: 5px 10px;
+ overflow: auto;
+ background-color: #fafafa;
+ border: 1px solid #e6e6e6;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
-#nav li {
- padding: 0 0.5em 0 0.8em;
+/*
+ typography stuff
+*/
+.mono {
+ font-family: "Inconsolata", Andale Mono, Monaco, Monospace;
}
-#nav li.section {
- margin-top: 30px;
+.sans {
+ font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}
-#nav a {
- text-decoration: none;
+.serif {
+ font-family: "Georgia", Times New Roman, Times, serif;
}
-a:link, a:visited {
- color: #333399; /* Dark blue */
+a {
+ color: #2e87dd;
text-decoration: none;
}
-#nav h1 {
- font-size: 140%;
- margin: 0.2em 0 0 0;
+a:hover {
+ text-decoration: underline;
}
-#nav h2 {
- font-size: 120%;
- padding: 0 0 0 20px;
- margin: 0;
+/*
+ navigation
+*/
+
+#navBg {
+ background-color: #f2f2f2;
+ border-right: 1px solid #ddd;
+ width: 220px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 0;
}
-#nav h3 {
- font-size: 100%;
- padding-left: 40px;
+#nav {
+ background-image: url("i/logo.png");
+ background-repeat: no-repeat;
+ background-position: center 10px;
+ width: 220px;
+ float: left;
margin: 0;
- font-style: italic;
+ padding: 150px 20px 0;
+ font-size: 13px;
+ text-shadow: 1px 1px #fff;
+ position: relative;
+ z-index: 1;
}
-#nav h4 {
- font-size: 80%;
- padding-left: 60px;
- margin: 0;
+#nav ul {
+ list-style-type:none;
+ padding: 0;
+ margin: 21px 0 0 0;
+}
+
+#nav ul li {
+ width: 100%;
+}
+
+#nav ul li.version {
+ text-align: center;
+ color: #4d4d4d;
+}
+
+#nav h1 {
+ color: #4d4d4d;
+ text-align: center;
+ font-size: 15px;
font-weight: normal;
+ text-transform: uppercase;
+ letter-spacing: 3px;
}
+span.spacer {
+ color: #2e87dd;
+ margin: 0 3px 0 5px;
+ background-image: url("i/dot.png");
+ background-repeat: repeat-x;
+ background-position: left 13px;
+}
+
+/*
+ icons
+*/
+
+span.icon {
+ width: 16px;
+ display: block;
+ background-image: url("i/sprite.png");
+ background-repeat: no-repeat;
+}
+
+span.icon.home {
+ background-position: center 5px;
+}
+
+span.icon.start {
+ background-position: center -27px;
+}
+
+span.icon.download {
+ background-position: center -59px;
+}
+
+span.icon.api {
+ background-position: center -89px;
+}
+
+span.icon.optimize {
+ background-position: center -119px;
+}
+
+span.icon.script {
+ background-position: center -150px;
+}
+
+span.icon.question {
+ background-position: center -182px;
+}
+
+span.icon.requirement {
+ background-position: center -214px;
+}
+
+span.icon.history {
+ background-position: center -247px;
+}
+
+span.icon.help {
+ background-position: center -279px;
+}
+
+span.icon.blog {
+ background-position: center -311px;
+}
+
+span.icon.twitter {
+ background-position: center -343px;
+}
+
+span.icon.git {
+ background-position: center -375px;
+}
+
+span.icon.fork {
+ background-position: center -407px;
+}
+
+/*
+ content
+*/
+
#content {
- width: 779px;
- float: left;
- border-left: 1px solid gray;
- padding: 10px;
- vertical-align: top;
+ margin: 0 0 0 220px;
+ padding: 0 20px;
+ background-color: #fff;
+ font-family: "Georgia", Times New Roman, Times, serif;
+ position: relative;
+ -moz-box-shadow: -5px 0 10px -5px rgba(0, 0, 0, 0.15);
+ -webkit-box-shadow: -5px 0 10px -5px rgba(0, 0, 0, 0.15);
+ box-shadow: -5px 0 10px -5px rgba(0, 0, 0, 0.15);
+}
+
+#content p {
+ padding: 7px 0;
+ color: #333;
+ font-size: 14px;
}
#content h1,
@@ -92,5 +226,401 @@ a:link, a:visited {
#content h4,
#content h5 {
font-weight: normal;
- border-bottom: 1px solid gray;
+ padding: 21px 0 7px;
+}
+
+#content h1 {
+ font-size: 21px;
+}
+
+#content h2 {
+ padding: 0 0 18px 0;
+ margin: 0 0 7px 0;
+ font-weight: normal;
+ font-size: 17px;
+ line-height: 24px;
+ text-align: center;
+ color: #222;
+ background-image: url("i/arrow.png");
+ background-repeat: no-repeat;
+ background-position: center bottom;
+ font-family: "Inconsolata", Andale Mono, Monaco, Monospace;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ text-shadow: 1px 1px 0 #fff;
+}
+
+#content h2 a {
+ color: #222;
+}
+
+#content h2 a:hover {
+ text-decoration: none;
+}
+
+#content h2 span.sectionMark {
+ display: block;
+ color: #aaa;
+ text-shadow: 1px 1px 0 #fff;
+ font-size: 15px;
+}
+
+#content h3 {
+ font-size: 15px;
+}
+
+#content h4 {
+ font-size: 12px;
+}
+
+#content h5 {
+ font-size: 10px;
+}
+
+#content ul {
+ list-style-type: disc;
+}
+
+#content ol {
+ list-style-type: lower-roman;
+}
+
+
+#content ul,
+#content ol {
+ border-left: 1px solid #DD2200;
+ color: #DD2200;
+ font-size: 14px;
+ list-style-position: outside;
+ margin: 7px 0 21px 0;
+ padding: 0 0 0 28px;
+ font-family: "Inconsolata", Andale Mono, Monaco, Monospace;
+}
+
+#content ul ul,
+#content ol ol {
+ -moz-box-shadow: none;
+ border: none;
+ padding: 0;
+ margin: 0 0 0 28px;
+}
+
+#content .section {
+ padding: 48px 0;
+ background-image: url("i/line.png");
+ background-repeat: no-repeat;
+ background-position: center bottom;
+ width: 576px;
+ margin: 0 auto;
+}
+
+#content .section:last-child {
+ background-image: none;
+}
+
+#content .note {
+ color: #222;
+ background-color: #ffff99;
+ padding: 5px 10px;
+ margin: 7px 0;
+ display: inline-block;
+}
+
+/*
+ page directory
+*/
+
+#content #directory.section {
+ background-color: #fff;
+ width: 576px;
+}
+
+#content #directory h1 {
+ padding: 0 0 65px 0;
+ margin: 0 0 14px 0;
+ font-weight: normal;
+ font-size: 21px;
+ text-align: center;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ color: #222;
+ background-image: url("i/arrow-x.png");
+ background-repeat: no-repeat;
+ background-position: center bottom;
+ font-family: "Inconsolata", Andale Mono, Monaco, Monospace;
+}
+
+
+#content ul.index {
+ padding: 0;
+ background-color: transparent;
+ border: none;
+ -moz-box-shadow: none;
+}
+
+#content ul.index li {
+ width: 100%;
+ font-size: 15px;
+ color: #333;
+ padding: 0 0 7px 0;
+}
+
+
+/*
+ intro page specific
+*/
+
+#content #intro {
+ margin-top: 21px;
+}
+
+#content #intro p,
+#content #intro h1 {
+ font-size: 19px;
+ line-height: 28px;
+ color: green;
+ letter-spacing: 2px;
+ padding: 0 0 28px 0;
+}
+
+#content #intro p:last-child,
+#content #intro h1:last-child {
+ padding: 0;
+}
+
+#content #intro p a {
+ color: green;
+ text-decoration: underline;
+}
+
+/*
+ footer
+*/
+#footer {
+ color: #4d4d4d;
+ padding: 65px 20px 20px;
+ margin: 20px auto 0;
+ text-align: center;
+ display: block;
+ font-size: 13px;
+ background-image: url("i/arrow-x.png");
+ background-repeat: no-repeat;
+ background-position: center top;
+ background-color: #fff;
+}
+
+#footer .latest {
+ display: block;
+}
+
+#footer .latest a {
+ color: #4d4d4d;
+ text-decoration: underline;
+}
+
+/*
+ Pygments manni style
+*/
+
+code {background-color: #fafafa}
+
+code .comment {color: #09f; font-style: italic}
+code .comment.preproc {color: #099; font-style: normal}
+code .comment.special {font-weight: bold}
+
+code .keyword {color: #069; font-weight: bold}
+code .keyword.pseudo {font-weight: normal}
+code .keyword.type {color: #078}
+
+code .operator {color: #555}
+code .operator.word {color: #000; font-weight: bold}
+
+code .name.builtin {color: #366}
+code .name.function {color: #c0f}
+code .name.class {color: #0a8; font-weight: bold}
+code .name.namespace {color: #0cf; font-weight: bold}
+code .name.exception {color: #c00; font-weight: bold}
+code .name.variable {color: #033}
+code .name.constant {color: #360}
+code .name.label {color: #99f}
+code .name.entity {color: #999; font-weight: bold}
+code .name.attribute {color: #309}
+code .name.tag {color: #309; font-weight: bold}
+code .name.decorator {color: #99f}
+
+code .string {color: #c30}
+code .string.doc {font-style: italic}
+code .string.interpol {color: #a00}
+code .string.escape {color: #c30; font-weight: bold}
+code .string.regex {color: #3aa}
+code .string.symbol {color: #fc3}
+code .string.other {color: #c30}
+
+code .number {color: #f60}
+
+
+/*
+ webkit scroll bars
+*/
+
+pre::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+
+pre::-webkit-scrollbar-button:start:decrement,
+pre::-webkit-scrollbar-button:end:increment {
+ display: block;
+ height: 0;
+ width: 0;
+}
+
+pre::-webkit-scrollbar-button:vertical:increment,
+pre::-webkit-scrollbar-button:horizontal:increment {
+ background-color: transparent;
+ display: block;
+ height: 0;
+ width: 0;
+}
+
+pre::-webkit-scrollbar-track-piece {
+ -webkit-border-radius: 3px;
+}
+
+pre::-webkit-scrollbar-thumb:vertical {
+ background-color: #aaa;
+ -webkit-border-radius: 3px;
+
+}
+
+pre::-webkit-scrollbar-thumb:horizontal {
+ background-color: #aaa;
+ -webkit-border-radius: 3px;
+}
+
+/*
+ hbox
+*/
+
+.hbox {
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+ -webkit-box-align: stretch;
+
+ display: -moz-box;
+ -moz-box-orient: horizontal;
+ -moz-box-align: stretch;
+
+ display: box;
+ box-orient: horizontal;
+ box-align: stretch;
+}
+
+.hbox > * {
+ -webkit-box-flex: 0;
+ -moz-box-flex: 0;
+ box-flex: 0;
+ display: block;
+}
+
+.vbox {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-box-align: stretch;
+
+ display: -moz-box;
+ -moz-box-orient: vertical;
+ -moz-box-align: stretch;
+
+ display: box;
+ box-orient: vertical;
+ box-align: stretch;
+}
+
+.vbox > * {
+ -webkit-box-flex: 0;
+ -moz-box-flex: 0;
+ box-flex: 0;
+ display: block;
+}
+
+.spacer {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
+}
+
+.reverse {
+ -webkit-box-direction: reverse;
+ -moz-box-direction: reverse;
+ box-direction: reverse;
+}
+
+.boxFlex0 {
+ -webkit-box-flex: 0;
+ -moz-box-flex: 0;
+ box-flex: 0;
+}
+
+.boxFlex1, .boxFlex {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
+}
+
+.boxFlex2 {
+ -webkit-box-flex: 2;
+ -moz-box-flex: 2;
+ box-flex: 2;
+}
+
+.boxGroup1 {
+ -webkit-box-flex-group: 1;
+ -moz-box-flex-group: 1;
+ box-flex-group: 1;
+}
+
+.boxGroup2 {
+ -webkit-box-flex-group: 2;
+ -moz-box-flex-group: 2;
+ box-flex-group: 2;
+}
+
+.start {
+ -webkit-box-pack: start;
+ -moz-box-pack: start;
+ box-pack: start;
+}
+
+.end {
+ -webkit-box-pack: end;
+ -moz-box-pack: end;
+ box-pack: end;
+}
+
+.center {
+ -webkit-box-pack: center;
+ -moz-box-pack: center;
+ box-pack: center;
+}
+
+/*
+ clearfix
+*/
+
+.clearfix:after {
+ content: ".";
+ display: block;
+ clear: both;
+ visibility: hidden;
+ line-height: 0;
+ height: 0;
+}
+
+html[xmlns] .clearfix {
+ display: block;
}
+
+* html .clearfix {
+ height: 1%;
+}
View
6 dist/post.html
@@ -1,3 +1,9 @@
+ <div id="footer" class="mono">
+ <span class="latest">Latest Release: <a href="http://requirejs.org/docs/download.html">0.15.0</a></span>
+ Open source: new BSD or MIT licensed
+ </div>
+ </div>
</div>
+
</body>
</html>
View
150 dist/pre.html
@@ -1,9 +1,11 @@
<!DOCTYPE html>
<html>
<head>
- <title>${title}</title>
+ <title>RequireJS</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/highlight/resources/highlight.css">
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+ <script type="text/javascript" src="init.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dojox.highlight");
@@ -23,31 +25,123 @@
</script>
</head>
<body>
-<ul id="nav">
- <li class="first"><a href="HOMEPATH">Home</a></li>
+<div id="grid"></div>
+<div id="wrapper">
- <li class="section"><a class="local" href="start.html">Start</a></li>
- <li><a class="local" href="download.html">Download</a></li>
- <li><a class="local" href="api.html">API</a></li>
- <li><a class="local" href="optimization.html">Optimization</a></li>
-
- <li class="section"><a class="local" href="jquery.html">Use with jQuery</a></li>
- <li><a class="local" href="node.html">Use with Node</a></li>
- <li><a class="local" href="commonjs.html">CommonJS Notes</a></li>
-
- <li class="section"><a class="local" href="faq.html">FAQs</a></li>
-
- <li class="section"><a class="local" href="why.html">Why</a></li>
- <li><a class="local" href="requirements.html">Requirements</a></li>
- <li><a class="local" href="history.html">History</a></li>
-
- <li class="section"><a href="http://groups.google.com/group/requirejs">Get Help</a></li>
- <li><a href="http://tagneto.blogspot.com">Blog</a></li>
- <li><a href="http://twitter.com/jrburke">Twitter</a></li>
-
- <li class="section"><a href="http://github.com/jrburke/requirejs">GitHub</a></li>
- <li><a class="local" href="contributing.html">Contributing</a></li>
-
- <li class="section">0.15.0 Docs</li>
-</ul>
-<div id="content">
+ <div id="navBg"></div>
+ <div id="nav" class="mono">
+
+ <h1>a javascript module loader</h1>
+
+ <ul>
+ <li class="hbox">
+ <a href="./">Home</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon home"></span>
+ </li>
+ </ul>
+
+ <ul>
+ <li class="hbox">
+ <a class="local" href="start.html">Start</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon start"></span>
+ </li>
+ <li class="hbox">
+ <a class="local" href="download.html">Download</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon download"></span>
+ </li>
+ <li class="hbox">
+ <a class="local" href="api.html">API</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon api"></span>
+ </li>
+ <li class="hbox">
+ <a class="local" href="optimization.html">Optimization</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon optimize"></span>
+ </li>
+ </ul>
+
+ <ul>
+ <li class="hbox">
+ <a class="local" href="jquery.html">Use with jQuery</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon script"></span>
+ </li>
+ <li class="hbox">
+ <a class="local" href="node.html">Use with Node</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon script"></span>
+ </li>
+ <li class="hbox">
+ <a class="local" href="commonjs.html">CommonJS Notes</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon script"></span>
+ </li>
+ </ul>
+
+ <ul>
+ <li class="hbox">
+ <a class="local" href="faq.html">FAQs</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon question"></span>
+ </li>
+ </ul>
+
+ <ul>
+ <li class="hbox">
+ <a class="local" href="why.html">Why</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon question"></span>
+ </li>
+ <li class="hbox">
+ <a class="local" href="requirements.html">Requirements</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon requirement"></span>
+ </li>
+ <li class="hbox">
+ <a class="local" href="history.html">History</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon history"></span>
+ </li>
+ </ul>
+
+ <ul>
+ <li class="hbox">
+ <a href="http://groups.google.com/group/requirejs">Get Help</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon help"></span>
+ </li>
+ <li class="hbox">
+ <a href="http://tagneto.blogspot.com">Blog</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon blog"></span>
+ </li>
+ <li class="hbox">
+ <a href="http://twitter.com/jrburke">Twitter</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon twitter"></span>
+ </li>
+ </ul>
+
+ <ul>
+ <li class="hbox">
+ <a href="http://github.com/jrburke/requirejs">GitHub</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon git"></span>
+ </li>
+ <li class="hbox">
+ <a class="local" href="contributing.html">Contributing</a>
+ <span class="spacer boxFlex"></span>
+ <span class="icon fork"></span>
+ </li>
+ </ul>
+
+ <ul>
+ <li class="version">0.15.0 Docs</li>
+ </ul>
+ </div>
+
+ <div id="content">
View
66 docs/api.md
@@ -1,30 +1,42 @@
-# RequireJS API
-
-* [Usage](#usage)
- * [Loading JavaScript Files](#jsfiles)
- * [Defining a Module](#define)
- * [Simple Name/Value Pairs](#defsimple)
- * [Definition Functions](#deffunc)
- * [Definition Functions with Dependencies](#defdep)
- * [Defining a Module as a Function](#funcmodule)
- * [Other Module Notes](#modulenotes)
- * [Circular Dependencies](#circular)
- * [Define an I18N Bundle](#i18n)
- * [Specify a Text File Dependency](#text)
- * [Specify a JSONP Service Dependency](#jsonp)
- * [Load Scripts in a Specific Order](#order)
-* [Mechanics](#mechanics)
-* [Configuration Options](#config)
-* [Page Load Event Support](#pageload)
-* [Advanced Usage](#advanced)
- * [Loading Modules from Packages](#packages)
- * [Multiversion Support](#multiversion)
- * [Loading Code After Page Load](#afterload)
- * [Module Modifiers](#modifiers)
- * [Modifier Registration](#modregister)
- * [Modifier Definition](#moddef)
- * [Web Worker Support](#webworker)
- * [Rhino Support](#rhino)
+<div id="directory" class="section">
+<h1>RequireJS API</h1>
+
+<ul class="index mono">
+ <li class="hbox"><a href="#usage">Usage</a><span class="spacer boxFlex"></span><span>&sect;&sect;1-1.6</span></li>
+ <ul>
+ <li><a href="#jsfiles">Loading JavaScript Files</a></li>
+ <li><a href="#define">Defining a Module</a>
+ <ul>
+ <li><a href="#defsimple">Simple Name/Value Pairs</a></li>
+ <li><a href="#deffunc">Definition Functions</a></li>
+ <li><a href="#defdep">Definition Functions with Dependencies</a></li>
+ <li><a href="#funcmodule">Defining a Module as a Function</a></li>
+ <li><a href="#modulenotes">Other Module Notes</a></li>
+ <li><a href="#circular">Circular Dependencies</a></li>
+ </ul></li>
+ <li><a href="#i18n">Define an I18N Bundle</a></li>
+ <li><a href="#text">Specify a Text File Dependency</a></li>
+ <li><a href="#jsonp">Specify a JSONP Service Dependency</a></li>
+ <li><a href="#order">Load Scripts in a Specific Order</a></li>
+ </ul></li>
+ <li><a href="#mechanics">Mechanics</a></li>
+ <li><a href="#config">Configuration Options</a></li>
+ <li><a href="#pageload">Page Load Event Support</a></li>
+ <li><a href="#advanced">Advanced Usage</a>
+ <ul>
+ <li><a href="#packages">Loading Modules from Packages</a></li>
+ <li><a href="#multiversion">Multiversion Support</a></li>
+ <li><a href="#afterload">Loading Code After Page Load</a></li>
+ <li><a href="#modifiers">Module Modifiers</a>
+ <ul>
+ <li><a href="#modregister">Modifier Registration</a></li>
+ <li><a href="#moddef">Modifier Definition</a></li>
+ </ul></li>
+ <li><a href="#webworker">Web Worker Support</a></li>
+ <li><a href="#rhino">Rhino Support</a></li>
+ </ul></li>
+</ul>
+</div>
# <a name="usage">Usage</a>
View
102 docs/commonjs.md
@@ -1,69 +1,91 @@
-# CommonJS Notes
+<div id="directory" class="section">
+<h1>CommonJS Notes</h1>
-* [Introduction](#intro)
-* [Manual Conversion](#manualconversion)
-* [Conversion Tool](#autoconversion)
-* [Setting Exported Value](#exports)
-* [Alternative Syntax](#altsyntax)
-* [Loading Modules from CommonJS Packages](packages)
-* [Optimization Tool](#optimize)
+<ul class="index mono">
+<li class="hbox"><a href="#intro">Introduction</a><span class="spacer boxFlex"></span><span>&sect;1</span></li>
+<li class="hbox"><a href="#manualconversion">Manual Conversion</a><span class="spacer boxFlex"></span><span>&sect;2</span></li>
+<li class="hbox"><a href="#autoconversion">Conversion Tool</a><span class="spacer boxFlex"></span><span>&sect;3</span></li>
+<li class="hbox"><a href="#exports">Setting Exported Value</a><span class="spacer boxFlex"></span><span>&sect;4</span></li>
+<li class="hbox"><a href="#altsyntax">Alternative Syntax</a><span class="spacer boxFlex"></span><span>&sect;5</span></li>
+<li class="hbox"><a href="packages">Loading Modules from CommonJS Packages</a><span class="spacer boxFlex"></span><span>&sect;6</span></li>
+<li class="hbox"><a href="#optimize">Optimization Tool</a><span class="spacer boxFlex"></span><span>&sect;7</span></li>
+</ul>
-## <a name="intro">Introduction</a>
+</div>
-[CommonJS](http://www.commonjs.org/) defines [a module format](http://wiki.commonjs.org/wiki/Modules/1.1.1). Unfortunately, it was defined without giving browsers equal footing to other JavaScript environments. Because of that, there are CommonJS spec proposals for [Transport formats](http://wiki.commonjs.org/wiki/Modules/Transport) and an [asynchronous require](http://wiki.commonjs.org/wiki/Modules/Async/A).
+<div class="section">
+<h2><a name="intro">Introduction</a><span class="sectionMark">&sect;1</span></h2>
-RequireJS tries to keep with the spirit of CommonJS, with using string names to refer to dependencies, and to avoid modules defining global objects, but still allow coding a module format that works well natively in the browser. RequireJS implements the [Asynchronous Module Definition](http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition) (formerly Transport/C) proposal.
+<p><a href="http://www.commonjs.org/">CommonJS</a> defines <a href="http://wiki.commonjs.org/wiki/Modules/1.1.1">a module format</a>. Unfortunately, it was defined without giving browsers equal footing to other JavaScript environments. Because of that, there are CommonJS spec proposals for <a href="http://wiki.commonjs.org/wiki/Modules/Transport">Transport formats</a> and an <a href="http://wiki.commonjs.org/wiki/Modules/Async/A">asynchronous require</a>.</p>
-If you have modules that are in the traditional CommonJS module format, then you can easily convert them to work with RequireJS. Alternatively, if you are using the RequireJS r.js Node adapter, you do not need to convert third-party modules -- r.js will do that on the fly as modules are loaded.
+<p>RequireJS tries to keep with the spirit of CommonJS, with using string names to refer to dependencies, and to avoid modules defining global objects, but still allow coding a module format that works well natively in the browser. RequireJS implements the <a href="http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition">Asynchronous Module Definition</a> (formerly Transport/C) proposal.</p>
-## <a name="manualconversion">Manual Conversion</a>
+<p>If you have modules that are in the traditional CommonJS module format, then you can easily convert them to work with RequireJS. Alternatively, if you are using the RequireJS r.js Node adapter, you do not need to convert third-party modules -- r.js will do that on the fly as modules are loaded.</p>
+</div>
-If you just have a few modules to convert, then all you need to do is wrap the module in this code:
+<div class="section">
+<h2><a name="manualconversion">Manual Conversion</a><span class="sectionMark">&sect;2</span></h2>
- define(function(require, exports, module) {
- //Put traditional CommonJS module content here
- });
+<p>If you just have a few modules to convert, then all you need to do is wrap the module in this code:</p>
-**IMPORTANT**: The function arguments should always be listed as **require, exports, module**, with those exact names and in that exact order, otherwise chaos will ensue. You can leave off exports and module from the list, but if they are needed, they need to be specified in the exact order illustrated here.
+<pre><code>define(function(require, exports, module) {
+ //Put traditional CommonJS module content here
+});
+</code></pre>
-## <a name="autoconversion">Conversion Tool</a>
+<p><strong>IMPORTANT</strong>: The function arguments should always be listed as <strong>require, exports, module</strong>, with those exact names and in that exact order, otherwise chaos will ensue. You can leave off exports and module from the list, but if they are needed, they need to be specified in the exact order illustrated here.</p>
+</div>
-If you have many modules to convert, RequireJS has a converter tool at **requirejs/convert/convertCommonJs.sh** (use .bat if you are on Windows). [Download the RequireJS source distribution](download.md#optimizationtool) to get the tool. Give it the path to the directory you want to convert and an output directory:
+<div class="section">
+<h2><a name="autoconversion">Conversion Tool</a><span class="sectionMark">&sect;3</span></h2>
- convertCommonJs.sh path/to/commonjs/modules/ path/to/output
+<p>If you have many modules to convert, RequireJS has a converter tool at <strong>requirejs/convert/convertCommonJs.sh</strong> (use .bat if you are on Windows). <a href="download.html#optimizationtool">Download the RequireJS source distribution</a> to get the tool. Give it the path to the directory you want to convert and an output directory:</p>
-## <a name="exports">Setting Exported Value</a>
+<pre><code>convertCommonJs.sh path/to/commonjs/modules/ path/to/output
+</code></pre>
+</div>
-There are some CommonJS systems that allow setting the exported value via module.setExports() or assigning the exported value as module.exports. Both of those idioms are supported by RequireJS, but there is another, easier one that is supported too -- just return the value from the function passed to **define**:
+<div class="section">
+<h2><a name="exports">Setting Exported Value</a><span class="sectionMark">&sect;4</span></h2>
- define(function (require) {
- var foo = require('foo');
+<p>There are some CommonJS systems that allow setting the exported value via module.setExports() or assigning the exported value as module.exports. Both of those idioms are supported by RequireJS, but there is another, easier one that is supported too -- just return the value from the function passed to <strong>define</strong>:</p>
- //Define this module as exporting a function
- return function () {
- foo.doSomething();
- };
- });
+<pre><code>define(function (require) {
+ var foo = require('foo');
-With this approach, then you normally do not need the exports and module function arguments, so you can leave them off the module definition.
+ //Define this module as exporting a function
+ return function () {
+ foo.doSomething();
+ };
+});
+</code></pre>
+
+<p>With this approach, then you normally do not need the exports and module function arguments, so you can leave them off the module definition.</p>
+</div>
-## <a name="altsyntax">Alternative Syntax</a>
+<div class="section">
+<h2><a name="altsyntax">Alternative Syntax</a><span class="sectionMark">&sect;5</span></h2>
-Instead of using require() to get dependencies inside the function passed to define(), you can also specify them via a dependency array argument to define(). The order of the names in the dependency array match the order of arguments passed to the definition function passed to define(). So the above example that uses the module **foo**:
+<p>Instead of using require() to get dependencies inside the function passed to define(), you can also specify them via a dependency array argument to define(). The order of the names in the dependency array match the order of arguments passed to the definition function passed to define(). So the above example that uses the module <strong>foo</strong>:</p>
-define(['foo'], function (foo) {
+<p>define(['foo'], function (foo) {
return function () {
foo.doSomething();
};
-});
+});</p>
-See the [API docs](api.md) for more information on that syntax.
+<p>See the <a href="api.html">API docs</a> for more information on that syntax.</p>
+</div>
-## <a name="packages">Loading Modules from CommonJS Packages</a>
+<div class="section">
+<h2><a name="packages">Loading Modules from CommonJS Packages</a><span class="sectionMark">&sect;6</span></h2>
-Modules in CommonJS packages can be loaded by RequireJS by setting up the RequireJS configuration to know about the location and package attributes. See the [packages API section](api.md#packages) for more information.
+<p>Modules in CommonJS packages can be loaded by RequireJS by setting up the RequireJS configuration to know about the location and package attributes. See the <a href="api.html#packages">packages API section</a> for more information.</p>
+</div>
-## <a name="optimize">Optimization Tool</a>
+<div class="section">
+<h2><a name="optimize">Optimization Tool</a><span class="sectionMark">&sect;7</span></h2>
-RequireJS has an optimization tool that can combine module definitions together into optimized bundles for browser delivery. It works as a command-line tool that you use as part of code deployment. See the [optimization docs](optimization.md) for more information.
+<p>RequireJS has an optimization tool that can combine module definitions together into optimized bundles for browser delivery. It works as a command-line tool that you use as part of code deployment. See the <a href="optimization.html">optimization docs</a> for more information.</p>
+</div>
View
10 docs/faq.md
@@ -1,4 +1,8 @@
-# RequireJS FAQs (Frequently Asked Questions)
+<div id="directory" class="section">
+<h1>RequireJS FAQs (Frequently Asked Questions)</h1>
-* [Optimization Tool](faq-optimization.md)
-* [Advanced Use](faq-advanced.md)
+<ul class="index mono">
+<li><a href="faq-optimization.html">Optimization Tool</a></li>
+<li><a href="faq-advanced.html">Advanced Use</a></li>
+</ul>
+</div>
View
195 docs/jquery.md
@@ -1,92 +1,135 @@
-# How to use RequireJS with jQuery
-
-When a project reaches a certain size, managing the script modules for a project starts to get tricky. You need to be sure to sequence the scripts in the right order, and you need to start seriously thinking about combining scripts together into a bundle for deployment, so that only one or a very small number of requests are made to load the scripts.
-
-You may also want to load code on the fly, after page load.
-
-RequireJS can help you manage the script modules, load them in the right order, and make it easy to combine the scripts later via the RequireJS [optimization tool](optimization.md) without needing to change your markup. It also gives you an easy way to load scripts after the page has loaded, allowing you to spread out the download size over time.
-
-RequireJS has a module system that lets you define well-scoped modules, but you do not have to follow that system to get the benefits of dependency management and build-time optimizations. Over time, if you start to create more modular code that needs to be reused in a few places, the module format for RequireJS makes it easy to write encapsulated code that can be loaded on the fly. It can grow with you, particularly if you want to incorporate internationalization (i18n) string bundles, to localize your project for different languages, or load some HTML strings and make sure those strings are available before executing code, or even use JSONP services as dependencies.
-
-## Get require.js
-
-First step is to [download a build of jQuery with RequireJS built in](download.md).
-
-## Set up your HTML page.
-
-A sample HTML page would look like this (assuming you put all your .js files in a "scripts" subdirectory):
-
- <!DOCTYPE html>
- <html>
- <head>
- <title>jQuery+RequireJS Sample Page</title>
- <script data-main="main" src="scripts/require-jquery.js"></script>
- </head>
- <body>
- <h1>jQuery+RequireJS Sample Page</h1>
- </body>
- </html>
-
-The data-main attribute on the script tag for require.js tells RequireJS to load the scripts/main.js file. RequireJS will load any dependency that is passed to require() without a ".js" file from the same directory as require.js. If you feel more comfortable specifying the whole path, you can also do the following:
-
- <script data-main="scripts/main.js" src="scripts/require-jquery.js"></script>
-
-What is in main.js? Another call to require.js to load all the scripts you need and any init work you want to do for the page. This example main.js script loads two plugins, jquery.alpha.js and jquery.beta.js (not the names of real plugins, just an example). The plugins should be in the same directory as require-jquery.js:
-
-main.js:
-
- require(["jquery.alpha", "jquery.beta"], function() {
- //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
- $(function() {
- $('body').alpha().beta();
- });
+<div id="directory" class="section">
+<h1>How to use RequireJS with jQuery</h1>
+<ul class="index mono">
+ <li class="hbox">
+ <a href="#1">Get Require.js</a><span class="spacer boxFlex"></span><span>&sect;1</span>
+ </li>
+ <li class="hbox">
+ <a href="#2">Set up your HTML page</a><span class="spacer boxFlex"></span><span>&sect;2</span>
+ </li>
+ <li class="hbox">
+ <a href="#3">Feel the need for speed</a><span class="spacer boxFlex"></span><span>&sect;3</span>
+ </li>
+ <li class="hbox">
+ <a href="#4">See it in action</a><span class="spacer boxFlex"></span><span>&sect;4</span>
+ </li>
+</ul>
+<p>When a project reaches a certain size, managing the script modules for a project starts to get tricky. You need to be sure to sequence the scripts in the right order, and you need to start seriously thinking about combining scripts together into a bundle for deployment, so that only one or a very small number of requests are made to load the scripts.</p>
+
+<p>You may also want to load code on the fly, after page load.</p>
+
+<p>RequireJS can help you manage the script modules, load them in the right order, and make it easy to combine the scripts later via the RequireJS <a href="optmization.md">optmization tool</a> without needing to change your markup. It also gives you an easy way to load scripts after the page has loaded, allowing you to spread out the download size over time.</p>
+
+<p>RequireJS has a module system that lets you define well-scoped modules, but you do not have to follow that system to get the benefits of dependency management and build-time optimizations. Over time, if you start to create more modular code that needs to be reused in a few places, the module format for RequireJS makes it easy to write encapsulated code that can be loaded on the fly. It can grow with you, particularly if you want to incorporate internationalization (i18n) string bundles, to localize your project for different languages, or load some HTML strings and make sure those strings are available before executing code, or even use JSONP services as dependencies.</p>
+</div>
+
+<div class="section">
+<h2>
+<a name="1">Get require.js</a>
+<span class="sectionMark">&sect;1</span>
+</h2>
+
+<p>First step is to <a href="download.md">download a build of jQuery with RequireJS built in</a>.</p>
+</div>
+
+<div class="section">
+<h2>
+<a name="2">Set up your HTML page</a>
+<span class="sectionMark">&sect;2</span>
+</h2>
+
+<p>A sample HTML page would look like this (assuming you put all your .js files in a "scripts" subdirectory):</p>
+
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+ &lt;title&gt;jQuery+RequireJS Sample Page&lt;/title&gt;
+ &lt;script data-main="main" src="scripts/require-jquery.js"&gt;&lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+ &lt;h1&gt;jQuery+RequireJS Sample Page&lt;/h1&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+
+<p>The data-main attribute on the script tag for require.js tells RequireJS to load the scripts/main.js file. RequireJS will load any dependency that is passed to require() without a ".js" file from the same directory as require.js. If you feel more comfortable specifying the whole path, you can also do the following:</p>
+
+<pre><code>&lt;script data-main="scripts/main.js" src="scripts/require-jquery.js"&gt;&lt;/script&gt;
+</code></pre>
+
+<p>What is in main.js? Another call to require.js to load all the scripts you need and any init work you want to do for the page. This example main.js script loads two plugins, jquery.alpha.js and jquery.beta.js (not the names of real plugins, just an example). The plugins should be in the same directory as require-jquery.js:</p>
+
+<p>main.js:</p>
+
+<pre><code>require(["jquery.alpha", "jquery.beta"], function() {
+ //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
+ $(function() {
+ $('body').alpha().beta();
});
+});
+</code></pre>
+</div>
+
+<div class="section">
+<h2>
+<a name="3">Feel the need for speed</a>
+<span class="sectionMark">&sect;3</span>
+</h2>
-## Feel the need for speed
+<p>Now your page is set up to be optimized very easily. Download the RequireJS source and place it anywhere you like, preferrably somewhere outside your web development area. For the purposes of this example, the RequireJS source is placed as a sibling to the <strong>webapp</strong> directory, which contains the HTML page and the scripts directory with all the scripts. Complete directory structure:</p>
-Now your page is set up to be optimized very easily. Download the RequireJS source and place it anywhere you like, preferrably somewhere outside your web development area. For the purposes of this example, the RequireJS source is placed as a sibling to the **webapp** directory, which contains the HTML page and the scripts directory with all the scripts. Complete directory structure:
+<ul>
+<li>requirejs/ (used for the build tools)</li>
+<li>webapp/app.html</li>
+<li>webapp/scripts/main.js</li>
+<li>webapp/scripts/require-jquery.js</li>
+<li>webapp/scripts/jquery.alpha.js</li>
+<li>webapp/scripts/jquery.beta.js</li>
+</ul>
-* requirejs/ (used for the build tools)
-* webapp/app.html
-* webapp/scripts/main.js
-* webapp/scripts/require-jquery.js
-* webapp/scripts/jquery.alpha.js
-* webapp/scripts/jquery.beta.js
+<p>Then, in the scripts directory that has require-jquery.js and main.js, create a file called app.build.js with the following contents:</p>
-Then, in the scripts directory that has require-jquery.js and main.js, create a file called app.build.js with the following contents:
+<pre><code>({
+ appDir: "../",
+ baseUrl: "scripts/",
+ dir: "../../webapp-build",
+ //Comment out the optimize line if you want
+ //the code minified by Closure Compiler using
+ //the "simple" optimizations mode
+ optimize: "none",
- ({
- appDir: "../",
- baseUrl: "scripts/",
- dir: "../../webapp-build",
- //Comment out the optimize line if you want
- //the code minified by Closure Compiler using
- //the "simple" optimizations mode
- optimize: "none",
-
- modules: [
- {
- name: "main"
- }
- ]
- })
+ modules: [
+ {
+ name: "main"
+ }
+ ]
+})
+</code></pre>
-To use the build tool, you need Java 6 installed. Closure Compiler is used for the JavaScript minification step (if optimize: "none" is commented out), and it requires Java 6.
+<p>To use the build tool, you need Java 6 installed. Closure Compiler is used for the JavaScript minification step (if optimize: "none" is commented out), and it requires Java 6.</p>
-To start the build, go to the **webapp/scripts** directory, execute the following command:
+<p>To start the build, go to the <strong>webapp/scripts</strong> directory, execute the following command:</p>
-For non-windows operating systems:
+<p>For non-windows operating systems:</p>
- ../../requirejs/build/build.sh app.build.js
+<pre><code>../../requirejs/build/build.sh app.build.js
+</code></pre>
-For windows operating systems:
+<p>For windows operating systems:</p>
- ..\..\requirejs\build\build.bat app.build.js
+<pre><code>..\..\requirejs\build\build.bat app.build.js
+</code></pre>
-Now, in the webapp-build directory, main.js will have the main.js contents, jquery.alpha.js and jquery.beta.js inlined. If you then load the app.html file in the webapp-build directory, you should not see any network requests for jquery.alpha.js and jquery.beta.js.
+<p>Now, in the webapp-build directory, main.js will have the main.js contents, jquery.alpha.js and jquery.beta.js inlined. If you then load the app.html file in the webapp-build directory, you should not see any network requests for jquery.alpha.js and jquery.beta.js.</p>
+</div>
-## See it in action
+<div class="section">
+<h2>
+<a name="4">See it in action</a>
+<span class="sectionMark">&sect;4</span>
+</h2>
-This example is really basic, but demonstrates how you can upgrade your code to use RequireJS, and get powerful build optimizations without needing to change your code.
+<p>This example is really basic, but demonstrates how you can upgrade your code to use RequireJS, and get powerful build optimizations without needing to change your code.</p>
-Visit the [Download page](download.md) to get this jQuery sample project as a zip file.
+<p>Visit the <a href="download.html">Download page</a> to get this jQuery sample project as a zip file.</p>
+</div>
View
86 docs/node.md
@@ -1,52 +1,84 @@
-# RequireJS in Node
+<div id="directory" class="section">
+<h1>RequireJS in Node</h1>
-You can use RequireJS in [Node](http://nodejs.org).
+ <ul class="index mono">
+ <li class="hbox">
+ <a href="#1">Doesn't Node already have a module loader?</a><span class="spacer boxFlex"></span><span>&sect;1</span>
+ </li>
+ <li class="hbox">
+ <a href="#2">Can I use server modules written in the CommonJS module format?</a><span class="spacer boxFlex"></span><span>&sect;2</span>
+ </li>
+ <li class="hbox">
+ <a href="#3">How do I use it?</a><span class="spacer boxFlex"></span><span>&sect;3</span>
+ </li>
+ </ul>
-## Doesn't Node already have a module loader?
+<span class="note">Note: You can use RequireJS in <a href="http://nodejs.org">Node</a></span>
+</div>
-Yes it does. That loader uses the CommonJS module format. The CommonJS module format is [non-optimal for the browser](why.md), and I do not prefer [some of the trade-offs made in the CommonJS module format](http://tagneto.blogspot.com/2010/03/commonjs-module-trade-offs.html). By using RequireJS on the server, you can use one format for all your modules, whether they are running server side or in the browser. That way you can preserve the speed benefits and easy debugging you get with RequireJS in the browser, and not have to worry about extra translation costs for moving between two formats.
+<div class="section">
+<h2>
+<a name="1">Doesn't Node already have a module loader?</a>
+<span class="sectionMark">&sect;1</span>
+</h2>
-## Can I use server modules already written in the CommonJS module format?
+<p>Yes it does. That loader uses the CommonJS module format. The CommonJS module format is <a href="why.html">non-optimal for the browser</a>, and I do not prefer <a href="http://tagneto.blogspot.com/2010/03/commonjs-module-trade-offs.html">some of the trade-offs made in the CommonJS module format</a>. By using RequireJS on the server, you can use one format for all your modules, whether they are running server side or in the browser. That way you can preserve the speed benefits and easy debugging you get with RequireJS in the browser, and not have to worry about extra translation costs for moving between two formats.</p>
+</div>
-Yes! The Node adapter for RequireJS, called r.js, automatically converts CommonJS modules to the RequireJS format on the fly, as they are loaded, so you can use your existing modules without having to hand-modify them.
+<div class="section">
+<h2>
+<a name="2">Can I use server modules already written in the CommonJS module format?</a>
+<span class="sectionMark">&sect;2</span></h2>
-However, the top most app file, the one you pass to Node on startup, needs to be coded to the RequireJS API. That file is evaluated as-is, no automatic format conversion.
+<p>Yes! The Node adapter for RequireJS, called r.js, automatically converts CommonJS modules to the RequireJS format on the fly, as they are loaded, so you can use your existing modules without having to hand-modify them.</p>
-Notes on the automatic format conversion:
+<p>However, the top most app file, the one you pass to Node on startup, needs to be coded to the RequireJS API. That file is evaluated as-is, no automatic format conversion.</p>
-RequireJS does not use search paths for modules. It only does the following:
+<p>Notes on the automatic format conversion:</p>
-* If the module ID is one of the modules that Node contains within itself (the ones in the Node's lib directory in its source distribution), it will be used.
-* Otherwise the module is assumed to be relative to the file that is given to Node to start your app.
+<p>RequireJS does not use search paths for modules. It only does the following:</p>
-You can always use the [Configuration Options](api.md#config) for RequireJS in your top level app file to configure paths and even a different baseUrl for your modules.
+<ul>
+<li>If the module ID is one of the modules that Node contains within itself (the ones in the Node's lib directory in its source distribution), it will be used.</li>
+<li>Otherwise the module is assumed to be relative to the file that is given to Node to start your app.</li>
+</ul>
-RequireJS does not support require.main and the module free variable only contains an **id** property. It does not define a require.async method, since require() in RequireJS can accept roughly equivalent arguments.
+<p>You can always use the <a href="api.html#config">Configuration Options</a> for RequireJS in your top level app file to configure paths and even a different baseUrl for your modules.</p>
-Even though RequireJS is an asynchronous loader in the browser, the RequireJS Node adapter loads modules synchronously in the Node environment. This was done to make the adapter easier to code. The adapter could be made asynchronous, but the primary benefit of RequireJS integration with Node is to allow you to write modules in the same format on the server and for the browser.
+<p>RequireJS does not support require.main and the module free variable only contains an <strong>id</strong> property. It does not define a require.async method, since require() in RequireJS can accept roughly equivalent arguments.</p>
-Finally, RequireJS in Node can only load modules that are on the local disk -- fetching modules across http, for instance, is not supported at this time.
+<p>Even though RequireJS is an asynchronous loader in the browser, the RequireJS Node adapter loads modules synchronously in the Node environment. This was done to make the adapter easier to code. The adapter could be made asynchronous, but the primary benefit of RequireJS integration with Node is to allow you to write modules in the same format on the server and for the browser.</p>
-For RequireJS features: the text plugin does not work in Node at the moment, but that should be fixed by the next RequireJS release.
+<p>Finally, RequireJS in Node can only load modules that are on the local disk -- fetching modules across http, for instance, is not supported at this time.</p>
-## How do I use it?
+<p>For RequireJS features: the text plugin does not work in Node at the moment, but that should be fixed by the next RequireJS release.</p>
+</div>
-Download r.js from the [the download page](download.md#node) and place it on your disk somewhere. Then run this command:
+<div class="section">
+<h2>
+<a name="3">How do I use it?</a>
+<span class="sectionMark">&sect;3</span>
+</h2>
- node path/to/r.js myNodeApp.js
+<p>Download r.js from the <a href="download.html#node">the download page</a> and place it on your disk somewhere. Then run this command:</p>
-This assumes you are in the directory that contains myNodeApp.js, your top-level Node application file.
+<pre><code>node path/to/r.js myNodeApp.js
+</code></pre>
-That is it!
+<p>This assumes you are in the directory that contains myNodeApp.js, your top-level Node application file.</p>
-If you want to try a sample app that works with r.js, see the index.js Hello World app on [the download page](download.md#node).
+<p>That is it!</p>
-The on-the-fly CommonJS module conversion could hit edge cases where it may not work. If you need to get get some visibility into where it failed, you can pass **debug** after r.js to get some printout on the converstion process and any problems during module execution:
+<p>If you want to try a sample app that works with r.js, see the index.js Hello World app on <a href="download.html#node">the download page</a>.</p>
- node path/to/r.js debug myNodeApp.js
+<p>The on-the-fly CommonJS module conversion could hit edge cases where it may not work. If you need to get get some visibility into where it failed, you can pass <strong>debug</strong> after r.js to get some printout on the converstion process and any problems during module execution:</p>
-Node integration is a relatively new feature, so I expect the conversion process may not work for all modules, and in particular, RequireJS has a different approach to circular dependencies than normal CommonJS modules.
+<pre><code>node path/to/r.js debug myNodeApp.js
+</code></pre>
-If you find you have a problem, and want to report it, use the [RequireJS GitHub Issues page](http://github.com/jrburke/requirejs/issues). If you can attach the output of the **debug** run, that would be helpful, **but be forewarned**, it is very verbose and prints out all the source code.
+<p>Node integration is a relatively new feature, so I expect the conversion process may not work for all modules, and in particular, RequireJS has a different approach to circular dependencies than normal CommonJS modules.</p>
-If you want to discuss the RequireJS-Node integration, you can use the [RequireJS Group](http://groups.google.com/group/requirejs).
+<p>If you find you have a problem, and want to report it, use the <a href="http://github.com/jrburke/requirejs/issues">RequireJS GitHub Issues page</a>. If you can attach the output of the <strong>debug</strong> run, that would be helpful, <strong>but be forewarned</strong>, it is very verbose and prints out all the source code.</p>
+
+<p>If you want to discuss the RequireJS-Node integration, you can use the <a href="http://groups.google.com/group/requirejs">RequireJS Group</a>.</p>
+</div>
View
337 docs/optimization.md
@@ -1,178 +1,229 @@
-# RequireJS Optimization Tool
+<div id="directory" class="section">
+<h1>RequireJS Optimization Tool</h1>
+
+<ul class="index mono">
+<li class="hbox"><a href="#requirements">Requirements</a><span class="spacer boxFlex"></span><span>&sect;1</span></li>
+<li class="hbox"><a href="#download">Download</a><span class="spacer boxFlex"></span><span>&sect;2</span></li>
+<li class="hbox"><a href="#setup">Example Setup</a><span class="spacer boxFlex"></span><span>&sect;3</span></li>
+<li class="hbox"><a href="#onejs">Optimizing one JavaScript file</a><span class="spacer boxFlex"></span><span>&sect;4</span></li>
+<li class="hbox"><a href="#shallow">Shallow exclusions for fast development</a><span class="spacer boxFlex"></span><span>&sect;5</span></li>
+<li class="hbox"><a href="#onecss">Optimizing one CSS file</a><span class="spacer boxFlex"></span><span>&sect;6</span></li>
+<li class="hbox"><a href="#wholeproject">Optimizing a whole project</a><span class="spacer boxFlex"></span><span>&sect;7</span></li>
+<li class="hbox"><a href="#options">All configuration options</a><span class="spacer boxFlex"></span><span>&sect;8</span></li>
+</ul>
+
+<span class="note">Note: RequireJS comes with an optimization tool that does the following</span>
+
+<ul>
+<li>Combines related scripts together into build layers and minifies them via Google Closure.</li>
+<li>Optimizes CSS by inlining CSS files referenced by @import and removing comments.</li>
+<li>Can add require.js and any of its plugins to any optimized build layer.</li>
+</ul>
+
+<p>The optimization tool is in the requirejs/build directory, and it is designed to be run as part of a build or packaging step after you are done with development and are ready to deploy the code for your users.</p>
+</div>
+
+<div class="section">
+<h2>
+<a name="requirements">Requirements</a>
+<span class="sectionMark">&sect;1</span>
+</h2>
+
+<p>The optimization tool uses <a href="http://code.google.com/closure/compiler/">Google Closure Compiler</a> to do the code minification, and therefore requires <a href="http://java.com/">Java 6</a> to run.</p>
+</div>
+
+<div class="section">
+<h2><a name="download">Download</a><span class="sectionMark">&sect;2</span></h2>
+
+<p>You can download the tool on <a href="download.html#optimizationtool">the download page</a>.</p>
+</div>
+
+<div class="section">
+<h2><a name="setup">Example Setup</a><span class="sectionMark">&sect;3</span></h2>
+
+<p>The examples in this page will assume you downloaded and unzipped the optimization tool in a directory that is a sibling to your project directory. The optimization tool can live anywhere you want, but you will likely need to adjust the paths accordingly in these examples.</p>
+
+<p>Example setup:</p>
+
+<ul>
+<li>appdirectory
+<ul>
+<li>main.html</li>
+<li>css
+<ul>
+<li>common.css</li>
+<li>main.css</li>
+</ul></li>
+<li>scripts
+<ul>
+<li>require.js</li>
+<li>main.js</li>
+<li>one.js</li>
+<li>two.js</li>
+<li>three.js</li>
+</ul></li>
+</ul></li>
+<li>requirejs (the unzipped optimization tool from the <a href="download.html">download page</a>)
+<ul>
+<li>build
+<ul>
+<li>build.sh</li>
+</ul></li>
+<li>require</li>
+<li>require.js</li>
+</ul></li>
+</ul>
+
+<p>main.html has script tags for require.js and loads main.js via a require call, like so:</p>
+
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+ &lt;title&gt;My App&lt;/title&gt;
+ &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
+ &lt;script data-main="main" src="scripts/require.js"&gt;&lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+ &lt;h1&gt;My App&lt;/h1&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+
+<p>main.js loads one.js, two.js and three.js via a require call:</p>
+
+<pre><code>require(["one", "two", "three"], function (one, two, three) {
+});
+</code></pre>
+
+<p>main.css has content like the following:</p>
+
+<pre><code>@import url("common.css");
+
+.app {
+ background: transparent url(../../img/app.png);
+}
+</code></pre>
+</div>
+
+<div class="section">
+<h2>
+<a name="onejs">Optimizing one JavaScript file</a>
+<span class="sectionMark">&sect;4</span>
+</h2>
-* [Requirements](#requirements)
-* [Download](#download)
-* [Example Setup](#setup)
-* [Optimizing one JavaScript file](#onejs)
-* [Shallow exclusions for fast development](#shallow)
-* [Optimizing one CSS file](#onecss)
-* [Optimizing a whole project](#wholeproject)
-* [All configuration options](#options)
+<p>Use the above example setup, if you just wanted to optimize main.js, you could use this command, from inside the <strong>appdirectory/scripts</strong> directory:</p>
+
+<pre><code>../../requirejs/build/build.sh name=main out=main-built.js baseUrl=.
+</code></pre>
-RequireJS comes with an optimization tool that does the following:
+<p>This will create a file called <strong>appdirectory/scripts/main-built.js</strong> that will include the contents of main.js, one.js, two.js and three.js.</p>
-* Combines related scripts together into build layers and minifies them via Google Closure.
-* Optimizes CSS by inlining CSS files referenced by @import and removing comments.
-* Can add require.js and any of its plugins to any optimized build layer.
+<p>Normally you should <strong>not</strong> save optimized files with your pristine project source. Normally you would save them to a copy of your project, but to make this example easier it is saved with the source. Change the <strong>out=</strong> option to any directory you like, that has a copy of your source. Then, you can change the main-built.js file name to just main.js so the HTML page will load the optimized version of the file.</p>
-The optimization tool is in the requirejs/build directory, and it is designed to be run as part of a build or packaging step after you are done with development and are ready to deploy the code for your users.
+<p>If you wanted to include require.js with the main.js source, you can use this command:</p>
-## <a name="requirements">Requirements</a>
+<pre><code>../../requirejs/build/build.sh name=main out=main-built.js baseUrl=. includeRequire=true
+</code></pre>
-The optimization tool uses [Google Closure Compiler](http://code.google.com/closure/compiler/) to do the code minification, and therefore requires [Java 6](http://java.com/) to run.
+<p>Once that is done, you can then rename the main-built.js file to require.js and your optimized project will only need to make one script request!</p>
+</div>
-## <a name="download">Download</a>
+<div class="section">
+<h2><a name="shallow">Shallow exclusions for fast development</a><span class="sectionMark">&sect;5</span> </h2>
-You can download the tool on [the download page](download.md#optimizationtool).
+<p>You can use the <a href="#onejs">one JavaScript file optimization</a> approach to make your development experience faster. By optimizing all the modules in your project into one file, except the one you are currently developing, you can reload your project quickly in the browser, but still give you the option of fine grained debugging in a module.</p>
-## <a name="setup">Example Setup</a>
+<p>You can do this by using the <strong>excludeShallow</strong> option. Using the <a href="#example">example setup</a> above, assume you are currently building out or debugging two.js. You could use thing optimization command:</p>
-The examples in this page will assume you downloaded and unzipped the optimization tool in a directory that is a sibling to your project directory. The optimization tool can live anywhere you want, but you will likely need to adjust the paths accordingly in these examples.
+<pre><code>../../requirejs/build/build.sh name=main excludeShallow=two out=main-built.js baseUrl=. includeRequire=true
+</code></pre>
-Example setup:
+<p>If you do not want the main-build.js file minified, pass <strong>optimize=none</strong> in the command above.</p>
-* appdirectory
- * main.html
- * css
- * common.css
- * main.css
- * scripts
- * require.js
- * main.js
- * one.js
- * two.js
- * three.js
-* requirejs (the unzipped optimization tool from the [download page](download.md))
- * build
- * build.sh
- * require
- * require.js
+<p>Then configure the HTML page to load the main-built.js file instead of main.js by configuring the path used for "main" to be "main-built":</p>
-main.html has script tags for require.js and loads main.js via a require call, like so:
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+ &lt;title&gt;My App&lt;/title&gt;
+ &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
+ &lt;script src="scripts/require.js"&gt;&lt;/script&gt;
+ &lt;script&gt;
+ require({
+ paths: {
+ //Comment out this line to go back to loading
+ //the non-optimized main.js source file.
+ "main": "main-built"
+ }
+ }, ["main"]);
+ &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+ &lt;h1&gt;My App&lt;/h1&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
- <!DOCTYPE html>
- <html>
- <head>
- <title>My App</title>
- <link rel="stylesheet" type="text/css" href="css/main.css">
- <script data-main="main" src="scripts/require.js"></script>
- </head>
- <body>
- <h1>My App</h1>
- </body>
- </html>
+<p>Now, when this page is loaded, the require() for "main" will load the main-built.js file. Since excludeShallow told it just to exclude two.js, two.js will still be loaded as a separate file, allowing you to see it as a separate file in the browser's debugger, so you can set breakpoints and better track its individual changes.</p>
+</div>
-main.js loads one.js, two.js and three.js via a require call:
+<div class="section">
+<h2><a name="onecss">Optimizing one CSS file</a><span class="sectionMark">&sect;6</span></h2>
- require(["one", "two", "three"], function (one, two, three) {
- });
+<p>Use the above example setup, if you just wanted to optimize main.css, you could use this command, from inside the <strong>appdirectory/css</strong> directory:</p>
-main.css has content like the following:
+<pre><code>../../requirejs/build/build.sh cssIn=main.css out=main-built.css
+</code></pre>
- @import url("common.css");
+<p>This will create a file called <strong>appdirectory/css/main-build.css</strong> that will include the contents of common.js, have the url() paths properly adjusted, and have comments removed.</p>
- .app {
- background: transparent url(../../img/app.png);
- }
+<p>See the notes for the <a href="#onejs">Optimizing one JavaScript file</a> about avoiding saving optimized files in your pristine source tree. It is only done here to make the example simpler.</p>
-## <a name="onejs">Optimizing one JavaScript file</a>
+<span class="note">Note: The url() path fixing will always fix the paths relative to the <strong>cssIn</strong> build option path, not the <strong>out</strong> build option.</span>
+</div>
-Use the above example setup, if you just wanted to optimize main.js, you could use this command, from inside the **appdirectory/scripts** directory:
+<div class="section">
+<h2><a name="wholeproject">Optimizing a whole project</a><span class="sectionMark">&sect;7</span></h2>
- ../../requirejs/build/build.sh name=main out=main-built.js baseUrl=.
+<p>The optimization tool can take care of optimizing all the CSS and JS files in your project by using a build profile.</p>
-This will create a file called **appdirectory/scripts/main-built.js** that will include the contents of main.js, one.js, two.js and three.js.
+<p>Create a build profile, call it app.build.js, and put it in the <strong>scripts</strong> directory. The app.build.js file can live anywhere, but just be sure to adjust the paths accordingly in the example below -- all paths will be relative to where the app.build.js is located. Example app.build.js:</p>
-Normally you should **not** save optimized files with your pristine project source. Normally you would save them to a copy of your project, but to make this example easier it is saved with the source. Change the **out=** option to any directory you like, that has a copy of your source. Then, you can change the main-built.js file name to just main.js so the HTML page will load the optimized version of the file.
+<pre><code>({
+ appDir: "../",
+ baseUrl: "scripts/",
+ dir: "../../appdirectory-build",
+ modules: [
+ {
+ name: "main"
+ }
+ ]
+})
+</code></pre>
-If you wanted to include require.js with the main.js source, you can use this command:
+<p>This build profile tells RequireJS to copy all of <strong>appdirectory</strong> to a sibling directory called <strong>appdirectory-build</strong> and apply all the optimizations in the <strong>appdirectory-build</strong> directory. It is strongly suggested you use a different output directory than the source directory -- otherwise bad things will likely happen as the optimization tool overwrites your source.</p>
- ../../requirejs/build/build.sh name=main out=main-built.js baseUrl=. includeRequire=true
+<p>RequireJS will use <strong>baseUrl</strong> to resolve the paths for any module names. The <strong>baseUrl</strong> should be relative to <strong>appDir</strong>.</p>
-Once that is done, you can then rename the main-built.js file to require.js and your optimized project will only need to make one script request!
+<p>In the <strong>modules</strong> array, specify the module names that you want to optimize, in the example, "main". "main" will be mapped to <strong>appdirectory/scripts/main.js</strong> in your project. The build system will then trace the dependencies for main.js and inject them into the <strong>appdirectory-build/scripts/main.js</strong> file.</p>
-## <a name="shallow">Shallow exclusions for fast development</a>
+<p>It will also optimize any CSS files it finds inside <strong>appdirectory-build</strong>.</p>
-You can use the [one JavaScript file optimization](#onejs) approach to make your development experience faster. By optimizing all the modules in your project into one file, except the one you are currently developing, you can reload your project quickly in the browser, but still give you the option of fine grained debugging in a module.
+<p>To run the build on Unix/Linux systems, run this command from inside the <strong>appdirectory/scripts</strong> directory:</p>
-You can do this by using the **excludeShallow** option. Using the [example setup](#example) above, assume you are currently building out or debugging two.js. You could use thing optimization command:
+<pre><code>../../requirejs/build/build.sh app.build.js
+</code></pre>
- ../../requirejs/build/build.sh name=main excludeShallow=two out=main-built.js baseUrl=. includeRequire=true
+<p>For windows operating systems:</p>
-If you do not want the main-build.js file minified, pass **optimize=none** in the command above.
+<pre><code>..\..\requirejs\build\build.bat app.build.js
+</code></pre>
-Then configure the HTML page to load the main-built.js file instead of main.js by configuring the path used for "main" to be "main-built":
+<p>Once the build is done, you can use <strong>appdirectory-build</strong> as your optimized project, ready for deployment.</p>
+</div>
- <!DOCTYPE html>
- <html>
- <head>
- <title>My App</title>
- <link rel="stylesheet" type="text/css" href="css/main.css">
- <script src="scripts/require.js"></script>
- <script>
- require({
- paths: {
- //Comment out this line to go back to loading
- //the non-optimized main.js source file.
- "main": "main-built"
- }
- }, ["main"]);
- </script>
- </head>
- <body>
- <h1>My App</h1>
- </body>
- </html>
+<div class="section">
+<h2><a name="options">All configuration options</a><span class="sectionMark">&sect;8</span></h2>
-Now, when this page is loaded, the require() for "main" will load the main-built.js file. Since excludeShallow told it just to exclude two.js, two.js will still be loaded as a separate file, allowing you to see it as a separate file in the browser's debugger, so you can set breakpoints and better track its individual changes.
-
-## <a name="onecss">Optimizing one CSS file</a>
-
-Use the above example setup, if you just wanted to optimize main.css, you could use this command, from inside the **appdirectory/css** directory:
-
- ../../requirejs/build/build.sh cssIn=main.css out=main-built.css
-
-This will create a file called **appdirectory/css/main-build.css** that will include the contents of common.js, have the url() paths properly adjusted, and have comments removed.
-
-See the notes for the [Optimizing one JavaScript file](#onejs) about avoiding saving optimized files in your pristine source tree. It is only done here to make the example simpler.
-
-**NOTE**: The url() path fixing will always fix the paths relative to the **cssIn** build option path, not the **out** build option.
-
-## <a name="wholeproject">Optimizing a whole project</a>
-
-The optimization tool can take care of optimizing all the CSS and JS files in your project by using a build profile.
-
-Create a build profile, call it app.build.js, and put it in the **scripts** directory. The app.build.js file can live anywhere, but just be sure to adjust the paths accordingly in the example below -- all paths will be relative to where the app.build.js is located. Example app.build.js:
-
- ({
- appDir: "../",
- baseUrl: "scripts/",
- dir: "../../appdirectory-build",
- modules: [
- {
- name: "main"
- }
- ]
- })
-
-This build profile tells RequireJS to copy all of **appdirectory** to a sibling directory called **appdirectory-build** and apply all the optimizations in the **appdirectory-build** directory. It is strongly suggested you use a different output directory than the source directory -- otherwise bad things will likely happen as the optimization tool overwrites your source.
-
-RequireJS will use **baseUrl** to resolve the paths for any module names. The **baseUrl** should be relative to **appDir**.
-
-In the **modules** array, specify the module names that you want to optimize, in the example, "main". "main" will be mapped to **appdirectory/scripts/main.js** in your project. The build system will then trace the dependencies for main.js and inject them into the **appdirectory-build/scripts/main.js** file.
-
-It will also optimize any CSS files it finds inside **appdirectory-build**.
-
-To run the build on Unix/Linux systems, run this command from inside the **appdirectory/scripts** directory:
-
- ../../requirejs/build/build.sh app.build.js
-
-For windows operating systems:
-
- ..\..\requirejs\build\build.bat app.build.js
-
-Once the build is done, you can use **appdirectory-build** as your optimized project, ready for deployment.
-
-## <a name="options">All configuration options</a>
-
-There is an [example.build.js](http://github.com/jrburke/requirejs/blob/master/build/example.build.js) file in the requirejs/build directory that details all of the allowed optimization tool configuration options.
+<p>There is an <a href="http://github.com/jrburke/requirejs/blob/master/build/example.build.js">example.build.js</a> file in the requirejs/build directory that details all of the allowed optimization tool configuration options.</p>
+</div>
View
175 docs/start.md
@@ -1,71 +1,112 @@
-# RequireJS Start
-
-How to get started with RequireJS:
-
-* [Get RequireJS](#get)
-* [Add RequireJS to your project](#add)
-* Once you are ready to deploy your code, [use the Optimization Tool](#optimize) to make your code go fast.
-
-If you are using jQuery, there is a [targeted jQuery tutorial](jquery.md).
-
-## <a name="get">Get RequireJS</a>
-
-Go to the [download](download.md) page and get the file. There is a build of jQuery with integrated require() support too.
-
-## <a name="add">Add RequireJS</a>
-
-For jQuery-specific advice, see the [jQuery integration page](jquery.md).
-
-This setup assumes you keep all your JavaScript files in a "scripts" directory in your project. For example, if you have a project that has an project.html page, with some scripts, the directory layout might look like so:
-
-* project-directory/
- * project.html
- * scripts/
- * main.js
- * helper/
- * util.js
-
-Add require.js to the scripts directory, so it looks like so:
-
-* project-directory/
- * project.html
- * scripts/
- * main.js
- * require.js
- * helper/
- * util.js
-
-To take full advantage of the optimization tool, it is suggested that you keep all inline script out of the HTML, and only reference require.js with a require call like so to load your script:
-
- <!DOCTYPE html>
- <html>
- <head>
- <title>My Sample Project</title>
- <!-- data-main attribute tells require.js to load
- scripts/main.js after require.js loads. -->
- <script data-main="main" src="scripts/require.js"></script>
- </head>
- <body>
- <h1>My Sample Project</h1>
- </body>
- </html>
-
-Inside of main.js, you can use require() to load any other scripts you need to run:
-
- require(["helper/util"], function() {
- //This function is called when scripts/helper/util.js is loaded.
-
- require.ready(function() {
- //This function is called when the page is loaded (the DOMContentLoaded
- //event) and when all required scripts are loaded.
-
- //Do nested require() calls in here if you want to load code
- //after page load.
- });
+<div id="directory" class="section">
+ <h1>How to get started with RequireJS</h1>
+
+ <ul class="index mono">
+ <li class="hbox">
+ <a href="#get">Get RequireJS</a><span class="spacer boxFlex"></span><span>&sect;1</span>
+ </li>
+ <li class="hbox">
+ <a href="#add">Add RequireJS</a><span class="spacer boxFlex"></span><span>&sect;2</span>
+ </li>
+ <li class="hbox">
+ <a href="#optimize">Optimize</a><span class="spacer boxFlex"></span><span>&sect;3</span>
+ </li>
+ </ul>
+
+ <span class="note">Note: If you are using jQuery, there is a <a href="jquery.md">targeted jQuery tutorial</a></span>
+</div>
+
+<div class="section">
+<h2>
+ <a name="get">Get RequireJS</a>
+ <span class="sectionMark">&sect;1</span>
+</h2>
+
+<p>Go to the <a href="download.md">download</a> page and get the file. There is a build of jQuery with integrated require() support too.</p>
+</div>
+
+<div class="section">
+<h2>
+ <a name="add">Add RequireJS</a>
+ <span class="sectionMark">&sect;2</span>
+</h2>
+
+<span class="note">Note: For jQuery-specific advice, see the <a href="jquery.html">jQuery integration page</a></span>
+
+<p>This setup assumes you keep all your JavaScript files in a "scripts" directory in your project. For example, if you have a project that has an project.html page, with some scripts, the directory layout might look like so:</p>
+
+<ul>
+ <li>project-directory/
+ <ul>
+ <li>project.html</li>
+ <li>scripts/
+ <ul>
+ <li>main.js</li>
+ <li>helper/
+ <ul>
+ <li>util.js</li>
+ </ul></li>
+ </ul></li>
+ </ul></li>
+</ul>
+
+<p>Add require.js to the scripts directory, so it looks like so:</p>
+
+<ul>
+ <li>project-directory/
+ <ul>
+ <li>project.html</li>
+ <li>scripts/
+ <ul>
+ <li>main.js</li>
+ <li>require.js</li>
+ <li>helper/
+ <ul>
+ <li>util.js</li>
+ </ul></li>
+ </ul></li>
+ </ul></li>
+</ul>
+
+<p>To take full advantage of the optimization tool, it is suggested that you keep all inline script out of the HTML, and only reference require.js with a require call like so to load your script:</p>
+
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+ &lt;title&gt;My Sample Project&lt;/title&gt;
+ &lt;!-- data-main attribute tells require.js to load
+ scripts/main.js after require.js loads. --&gt;
+ &lt;script data-main="main" src="scripts/require.js"&gt;&lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+ &lt;h1&gt;My Sample Project&lt;/h1&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+
+<p>Inside of main.js, you can use require() to load any other scripts you need to run:</p>
+
+<pre><code>require(["helper/util"], function() {
+ //This function is called when scripts/helper/util.js is loaded.
+
+ require.ready(function() {
+ //This function is called when the page is loaded (the DOMContentLoaded
+ //event) and when all required scripts are loaded.
+
+ //Do nested require() calls in here if you want to load code
+ //after page load.
});
+});
+</code></pre>
-That is it! Check out the [API docs](api.md) to learn more about require().
+<p>That is it! Check out the <a href="api.html">API docs</a> to learn more about require().</p>
+</div>
-## <a name="optimize">Optimize</a>
+<div class="section">
+<h2>
+ <a name="optimize">Optimize</a>
+ <span class="sectionMark">&sect;3</span>
+</h2>
-Once you are finished doing development and want to deploy your code for your end users, you can use the [optimization tool](optimization.md) to combine the JavaScript files together and minify it. In the example above, it can combine main.js and helper/util.js into one file and minify it using Google's Closure Compiler.
+<p>Once you are finished doing development and want to deploy your code for your end users, you can use the <a href="optimization.md">optimization</a> to combine the JavaScript files together and minify it. In the example above, it can combine main.js and helper/util.js into one file and minify it using Google's Closure Compiler.</p>
+</div>
View
251 docs/why.md
@@ -1,140 +1,209 @@
-# Why RequireJS?
+<div id="directory" class="section">
+<h1>Why RequireJS?</h1>
+
+<ul class="index mono">
+ <li class="hbox">
+ <a href="#1">The Problem</a><span class="spacer boxFlex"></span><span>&sect;1</span>
+ </li>
+ <li class="hbox">
+ <a href="#2">Solution</a><span class="spacer boxFlex"></span><span>&sect;2</span>
+ </li>
+ <li class="hbox">
+ <a href="#3">Script loading APIs</a><span class="spacer boxFlex"></span><span>&sect;3</span>
+ </li>
+ <li class="hbox">
+ <a href="#4">Async vs Sync</a><span class="spacer boxFlex"></span><span>&sect;4</span>
+ </li>
+ <li class="hbox">
+ <a href="#5">Script loading: XHR</a><span class="spacer boxFlex"></span><span>&sect;5</span>
+ </li>
+ <li class="hbox">
+ <a href="#6">Script loading: Web Workers</a><span class="spacer boxFlex"></span><span>&sect;6</span>
+ </li>
+ <li class="hbox">
+ <a href="#7">Script loading: document.write()</a><span class="spacer boxFlex"></span><span>&sect;7</span>
+ </li>
+ <li class="hbox">
+ <a href="#8">Script loading: head.appendchild(script)</a><span class="spacer boxFlex"></span><span>&sect;8</span>
+ </li>
+ <li class="hbox">
+ <a href="#9">Function wrapping</a><span class="spacer boxFlex"></span><span>&sect;9</span>
+ </li>
+</ul>
+</div>
+
+<div class="section">
+<h2>
+<a name="1">The Problem</a>
+<span class="sectionMark">&sect;1</span>
+</h2>
+<ul>
+<li>Web sites are turning into Web apps</li>
+<li>Code complexity grows as the site gets bigger</li>
+<li>Assembly gets harder</li>
+<li>Developer wants discrete JS files/modules</li>
+<li>Deployment wants optimized code in just one or a few HTTP calls</li>
+</ul>
+</div>
+
+<div class="section">
+<h2><a name="2">Solution</a><span class="sectionMark">&sect;2</span></h2>
-## The Problem
+<p>Front-end developers need a solution with:</p>
+
+<ul>
+<li>Some sort of #include/import/require</li>
+<li>ability to load nested dependencies</li>
+<li>ease of use for developer but then backed by an optimization tool that helps deployment</li>
+</ul>
+</div>
-* Web sites are turning into Web apps
-* Code complexity grows as the site gets bigger
-* Assembly gets harder
-* Developer wants discrete JS files/modules
-* Deployment wants optimized code in just one or a few HTTP calls
+<div class="section">
+<h2><a name="3">Script Loading APIs</a><span class="sectionMark">&sect;3</span></h2>
-## Solution
+<p>First thing to sort out is a script loading API. Here are some candidates:</p>
-Front-end developers need a solution with:
+<ul>
+<li>Dojo: dojo.require("some.module")</li>
+<li>LABjs: $LAB.script("some/module.js")</li>
+<li>CommonJS: require("some/module")</li>
+</ul>
-* Some sort of #include/import/require
-* ability to load nested dependencies
-* ease of use for developer but then backed by an optimization tool that helps deployment
+<p>All of them map to loading some/path/some/module.js. Ideally we could choose the CommonJS syntax, since it is likely to get more common over time, and we want to reuse code.</p>
-## Script Loading APIs
+<p>We also want some sort of syntax that will allow loading plain JavaScript files that exist today -- a developer should not have to rewrite all of their JavaScript to get the benefits of script loading.</p>
-First thing to sort out is a script loading API. Here are some candidates:
+<p>However, we need something that works well in the browser. The CommonJS require() is a synchronous call, it is expected to return the module immediately. This does not work well in the browser.</p>
+</div>
-* Dojo: dojo.require("some.module")
-* LABjs: $LAB.script("some/module.js")
-* CommonJS: require("some/module")
+<div class="section">
+<h2><a name="4">Async vs Sync</a><span class="sectionMark">&sect;4</span></h2>
-All of them map to loading some/path/some/module.js. Ideally we could choose the CommonJS syntax, since it is likely to get more common over time, and we want to reuse code.
+<p>This example should illustrate the basic problem for the browser. Suppose we have an Employee object and we want a Manager object to derive from the Employee object. <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide%3aThe_Employee_Example%3aCreating_the_Hierarchy">Taking this example</a>, we might code it up like this using our script loading API:</p>
-We also want some sort of syntax that will allow loading plain JavaScript files that exist today -- a developer should not have to rewrite all of their JavaScript to get the benefits of script loading.
+<pre><code>var Employee = require("types/Employee");
-However, we need something that works well in the browser. The CommonJS require() is a synchronous call, it is expected to return the module immediately. This does not work well in the browser.
+function Manager () {
+ this.reports = [];
+}
-## Async vs Sync
+//Error if require call is async
+Manager.prototype = new Employee();
+</code></pre>
-This example should illustrate the basic problem for the browser. Suppose we have an Employee object and we want a Manager object to derive from the Employee object. [Taking this example](https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide%3aThe_Employee_Example%3aCreating_the_Hierarchy), we might code it up like this using our script loading API:
+<p>As the comment indicates above, if require() is async, this code will not work. However, loading scripts synchronously in the browser kills performance. So, what to do?</p>
+</div>
- var Employee = require("types/Employee");
-
- function Manager () {
- this.reports = [];
- }
-
- //Error if require call is async
- Manager.prototype = new Employee();
-
-As the comment indicates above, if require() is async, this code will not work. However, loading scripts synchronously in the browser kills performance. So, what to do?
+<div class="section">
+<h2><a name="5">Script Loading: XHR</a><span class="sectionMark">&sect;5</span></h2>
-## Script Loading: XHR
+<p>It is tempting to use XMLHttpRequest (XHR) to load the scripts. If XHR is used, then we can massage the text above -- we can do a regexp to find require() calls, make sure we load those scripts, then use eval() or script elements that have their body text set to the text of the script loaded via XHR.</p>
-It is tempting to use XMLHttpRequest (XHR) to load the scripts. If XHR is used, then we can massage the text above -- we can do a regexp to find require() calls, make sure we load those scripts, then use eval() or script elements that have their body text set to the text of the script loaded via XHR.
+<p>Using eval() to evaluate the modules is bad:</p>
-Using eval() to evaluate the modules is bad:
+<ul>
+<li>Developers have been tau