Steal makes JavaScript dependency management and resource loading easy.

This page details the steal script (steal/steal.js), and steal function which are used to load files into your page.
For documentation of other Steal projects, read StealJS.

Quick Overview

To start using steal, add the steal script to your page, and tell it the first file to load:

<script type='text/javascript'
        src='public/steal/steal.js?myapp/myapp.js'></script>

In the file (public/myapp/myapp.js), 'steal' all other files that you need like:

 steal("anotherFile")           //loads myapp/anotherFiles.js
    .css('style')               //      myapp/style.css
    .plugins('jquery/view',     //      jquery/view/view.js
             'steal/less')      //      steal/less/less.js
    .then(function(){           //called when all prior files have completed
       steal.less('myapp')      //loads myapp/myapp.less
    })
    .views('//myapp/show.ejs')  //loads myapp/show.ejs

Finally compress your page's JavaScript and CSS with:

 > js steal/buildjs path/to/mypage.html

Use

Use of steal.js is broken into 5 parts:

• Loading steal.js
• Loading your 'application' file.
• "Stealing" scripts
• Building (Concatenating+Compressing) the app
• Switching to the production build

Loading steal.js

First, you need to download JavaScriptMVC (or steal standalone) and unzip it into a public folder on your server. For this example, lets assume you have the steal script in public/steal/steal.js.

Next, you need to load the steal.js script in your html page. We suggest bottom loading your scripts. For example, if your page is in pages/myapp.html, you can get steal like:

 <script type='text/javascript'
     src='../public/steal/steal.js'>
 </script>

Loading your 'application' file

The first file your application loads is referred to as an "application" file. It loads all the files and resources that your application needs. For this example, we'll put our application file in: public/myapp/myapp.js

You have to tell steal where to find it by configuring steal.options. There are a lot of ways to configure steal to load your app file, but we've made it really easy:

 <script type='text/javascript'
     src='../public/steal/steal.js?myapp/myapp.js'>
 </script>

This sets ...

 steal.options.startFile = 'myapp/myapp.js'

... and results in steal loading public/myapp/myapp.js.

Stealing Scripts

In your files, use the steal function and its helpers to load dependencies then describe your functionality. Typically, most of the 'stealing' is done in your application file. Loading jQuery and jQuery.UI from google, a local helpers.js and then adding tabs might look something like this:

 steal( 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js',
        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js',
        'helpers')
 .then( function(){
   $('#tabs').tabs();
 });

There's a few things to notice:

• the steal function can take multiple arguments. Each argument can be a string, object, or function. Learn more about what can be passed to steal in the [steal.prototype.init] documentation.
• steal can load cross domain
• steal loads relative to the current file
• steal adds .js if not present

• steal is chainable (most function return steal)

  Building the app

  Building the app means combining and compressing your apps JavaScript and CSS into a single file. A lot more details can be found on building in the steal.build documentation. But, if you used JavaScriptMVC's app or plugin generator, you can build your app's JS and CSS with:

 js myapp\scripts\compress.js

Or if you are using steal without JavaScriptMVC:

 js steal/buildjs pages/myapp.html -to public/myapp

This creates public/myapp/production.js and public/myapp/production.css.

### Switching to the production build

To use the production files, load steal.production.js instead of steal.js in your html file:

 <script type='text/javascript'
         src='../public/steal/steal.production.js?myapp/myapp.js'>
 </script>

## Steal helpers

There are a number of steal helper functions that can be used to load files in a particular location or of a type other than JavaScript:

• steal.coffee - loads
  CoffeeScript scripts.
• steal.controllers - loads controllers relative to the current path.
• steal.css - loads a css file.
• steal.less - loads Less style sheets.
• steal.models - loads models relative to the current path.
• steal.plugins - loads JavaScript files relative to steal's root folder.
• steal.resources - loads a script in a relative resources folder.

• steal.views - loads a client side template to be compiled into the production build.

  Script Load Order

  The load order for your scripts follows a consistent last-in first-out order across all browsers. This is the same way the following document.write would work in msie, Firefox, or Safari:

 document.write('<script type="text/javascript" src="some_script.js">')

An example helps illustrate this.

Load Order	File
1	1.js
2	3.js
3	4.js
4	2.js
5	5.js
6	6.js

Constructor

Loads files or runs functions after all previous files and functions have been loaded.

new steal(resource) -> steal