Cleanup build system

* create no conflict packed version of ace
* move text area code into the normal code base
* remote special cased code for textarea

Makefile

@@ -6,6 +6,7 @@ build:
 	
 	cp -r demo/kitchen-sink/styles.css build/demo/kitchen-sink/styles.css
 	cp demo/kitchen-sink/logo.png build/demo/kitchen-sink/logo.png
+	cp -r doc/site/images build/textarea
 	
 	./Makefile.dryice.js normal
 	./Makefile.dryice.js bm

Makefile.dryice.js

@@ -41,7 +41,11 @@ var fs = require("fs");
 
 var args = process.argv;
 var target = null;
-var targetDir = null;
+var TARGET_DIR = "build";
+var NAMESPACE = "ace";
+var ROOT_MODULE = "ace/ace";
+
+
 if (args.length == 3) {
     target = args[2];
     // Check if 'target' contains some allowed value.
@@ -65,22 +69,13 @@ if (!target) {
     console.log("  normal      Runs embedded build of Ace");
     console.log("  bm          Runs bookmarklet build of Ace");
     process.exit(0);
-} else {
+} else if (target == "bm") {
-    if (target == "normal") {
+    TARGET_DIR = "build/textarea";
-        targetDir = "build";
+    NAMESPACE = "__ace_shadowed__";
-    } else {
+    ROOT_MODULE = ["ace/ext/textarea"];
-        targetDir = "build/textarea";
-        function shadow(input) {
-            if (typeof input !== 'string') {
-                input = input.toString();
-            }
-
-            return input.replace(/define\(/g, "__ace_shadowed__.define(");
-        }
-    }
 }
 
-console.log("using targetDir '", targetDir, "'");
+console.log("using targetDir '", TARGET_DIR, "'");
 
 var copy = require('dryice').copy;
 
@@ -92,23 +87,27 @@ var aceProject = {
         aceHome + '/demo'
     ],
     textPluginPattern: /^ace\/requirejs\/text!/
-}
+};
 
 if (target == "normal") {
     copy({
         source: "build_support/editor.html",
-        dest:   targetDir + '/editor.html'
+        dest:   TARGET_DIR + '/editor.html'
     });
     
     demo();
-} else if(target == "bm") {
+} else if (target == "bm") {
     copy({
         source: "build_support/editor_textarea.html",
-        dest:   targetDir + '/editor.html'
+        dest:   TARGET_DIR + '/editor.html'
+    });
+    copy({
+        source: "doc/site/images/body_background.png",
+        dest:   TARGET_DIR + '/body_background.png'
     });
     copy({
         source: "build_support/style.css",
-        dest:   targetDir + '/style.css'
+        dest:   TARGET_DIR + '/style.css'
     });
 }
 
@@ -119,23 +118,53 @@ function filterTextPlugin(text) {
     return text.replace(/(['"])ace\/requirejs\/text\!/g, "$1text!");
 }
 
+function namespace(ns) {
+    return function(text) {
+        text = text
+            .toString()
+            .replace('var ACE_NAMESPACE = "";', 'var ACE_NAMESPACE = "' + ns +'";')
+            .replace(/\bdefine\(/g, ns + ".define(");
+        
+        return text;
+    };
+}
+
+function exportAce(ns, module, requireBase) {
+    requireBase = requireBase || "window";
+    module = module || "ace/ace";
+    return function(text) {
+        
+        var template = function() {
+            (function() {
+                REQUIRE_NS.require(["MODULE"], function(a) {
+                    if (!window.NS)
+                        window.NS = {};
+                    for (var key in a) if (a.hasOwnProperty(key))
+                        NS[key] = a[key];
+                });
+            })();
+        };
+        
+        return (text + ";" + template
+            .toString()
+            .replace(/MODULE/g, module)
+            .replace(/REQUIRE_NS/g, requireBase)
+            .replace(/NS/g, ns)
+            .slice(13, -1)
+        );
+    };
+}
+
 var ace = copy.createDataObject();
 copy({
-    source: [
+    source: ["build_support/mini_require.js"],
-        target == "normal"
-            ? 'build_support/mini_require.js'
-            : 'build_support/mini_require_textarea.js'
-    ],
     dest: ace
 });
 copy({
     source: [
         copy.source.commonjs({
             project: project,
-            require: [
+            require: ROOT_MODULE
-                "ace/lib/fixoldbrowsers",
-                "ace/ace"
-            ]
         })
     ],
     filter: [ copy.filter.moduleDefines ],
@@ -150,75 +179,48 @@ copy({
     filter: [ copy.filter.addDefines ],
     dest: ace
 });
+
+console.log('# ace ---------');
+
+// Create the compressed and uncompressed output files
 copy({
-    source: [
+    source: ace,
-        target == "normal"
+    filter: [filterTextPlugin, exportAce(NAMESPACE, ROOT_MODULE), copy.filter.uglifyjs],
-            ? 'build_support/boot.js'
+    dest:   TARGET_DIR + '/src/ace.js'
-            : 'build_support/boot_textarea.js'
+});
-    ],
+copy({
-    dest: ace
+    source: ace,
+    filter: [filterTextPlugin, exportAce(NAMESPACE, ROOT_MODULE)],
+    dest:   TARGET_DIR + '/src/ace-uncompressed.js'
+});
+copy({
+    source: ace,
+    filter: [filterTextPlugin, namespace(NAMESPACE), exportAce(NAMESPACE, ROOT_MODULE, NAMESPACE), copy.filter.uglifyjs],
+    dest:   TARGET_DIR + '/src/ace-noconflict.js'
+});
+copy({
+    source: ace,
+    filter: [filterTextPlugin, namespace(NAMESPACE), exportAce(NAMESPACE, ROOT_MODULE, NAMESPACE)],
+    dest:   TARGET_DIR + '/src/ace-uncompressed-noconflict.js'
 });
 
-if (target == "normal") {
+project.assumeAllFilesLoaded();
-    console.log('# ace ---------');
+copy({
+    source: [
+        copy.source.commonjs({
+            project: cloneProject(project),
+            require: [ "pilot/index" ]
+        })
+    ],
+    filter: [filterTextPlugin, copy.filter.uglifyjs],
+    dest:   TARGET_DIR + "/src/ace-compat.js"
+});
     
-    // Create the compressed and uncompressed output files
+var modeThemeFilters = [
-    copy({
+    copy.filter.moduleDefines,
-        source: ace,
+    filterTextPlugin,
-        filter: [copy.filter.uglifyjs, filterTextPlugin],
+    copy.filter.uglifyjs
-        dest:   targetDir + '/src/ace.js'
+];
-    });
-    copy({
-        source: ace,
-        filter: [filterTextPlugin],
-        dest:   targetDir + '/src/ace-uncompressed.js'
-    });
-    
-    project.assumeAllFilesLoaded();
-    copy({
-        source: [
-            copy.source.commonjs({
-                project: cloneProject(project),
-                require: [ "pilot/index" ]
-            })
-        ],
-        filter: [copy.filter.uglifyjs, filterTextPlugin],
-        dest:   targetDir + "/src/ace-compat.js"
-    });
-    
-} else if (target == "bm") {
-    copy({
-        source: ace,
-        filter: [
-            shadow,
-            copy.filter.uglifyjs
-        ],
-        dest:   targetDir + '/src/ace.js'
-    });
-    copy({
-        source: ace,
-        filter: [
-            filterTextPlugin,
-            shadow
-        ],
-        dest:   targetDir + '/src/ace-uncompressed.js'
-    });
-}
-
-var modeThemeFilters;
-if (target == "normal") {
-    modeThemeFilters = [
-        copy.filter.moduleDefines,
-        copy.filter.uglifyjs,
-        filterTextPlugin
-    ];
-} else if (target == "bm") {
-    modeThemeFilters = [
-        copy.filter.moduleDefines,
-        shadow,
-        copy.filter.uglifyjs
-    ];
-}
 
 console.log('# ace modes ---------');
 
@@ -229,15 +231,21 @@ project.assumeAllFilesLoaded();
     "ocaml", "scala", "textile", "scad", "markdown", "latex", "powershell", "sql"
 ].forEach(function(mode) {
     console.log("mode " + mode);
+    var source = [
+        copy.source.commonjs({
+            project: cloneProject(project),
+            require: [ 'ace/mode/' + mode ]
+        })
+    ];
     copy({
-        source: [
+        source: source,
-            copy.source.commonjs({
-                project: cloneProject(project),
-                require: [ 'ace/mode/' + mode ]
-            })
-        ],
         filter: modeThemeFilters,
-        dest:   targetDir + "/src/mode-" + mode + ".js"
+        dest:   TARGET_DIR + "/src/mode-" + mode + ".js"
+    });
+    copy({
+        source: source,
+        filter: [namespace(NAMESPACE)].concat(modeThemeFilters),
+        dest:   TARGET_DIR + "/src/mode-" + mode + "-noconflict.js"
     });
 });
 
@@ -252,13 +260,19 @@ console.log('# ace themes ---------');
     "tomorrow_night_blue", "tomorrow_night_bright", "tomorrow_night_eighties",
     "twilight", "vibrant_ink"
 ].forEach(function(theme) {
+    var source = [{
+        root: aceHome + '/lib',
+        include: "ace/theme/" + theme + ".js"
+    }];
     copy({
-        source: [{
+        source: source,
-            root: aceHome + '/lib',
-            include: "ace/theme/" + theme + ".js"
-        }],
         filter: modeThemeFilters,
-        dest:   targetDir + "/src/theme-" + theme + ".js"
+        dest:   TARGET_DIR + "/src/theme-" + theme + ".js"
+    });
+    copy({
+        source: source,
+        filter: [namespace(NAMESPACE)].concat(modeThemeFilters),
+        dest:   TARGET_DIR + "/src/theme-" + theme + "-noconflict.js"
     });
 });
 
@@ -266,15 +280,15 @@ console.log('# ace License | Readme | Changelog ---------');
 
 copy({
     source: aceHome + "/LICENSE",
-    dest:   targetDir + '/LICENSE'
+    dest:   TARGET_DIR + '/LICENSE'
 });
 copy({
     source: aceHome + "/Readme.md",
-    dest:   targetDir + '/Readme.md'
+    dest:   TARGET_DIR + '/Readme.md'
 });
 copy({
     source: aceHome + "/ChangeLog.txt",
-    dest:   targetDir + '/ChangeLog.txt'
+    dest:   TARGET_DIR + '/ChangeLog.txt'
 });
 
 // For the bookmarklet build, we are done.
@@ -323,16 +337,22 @@ console.log('# ace key bindings ---------');
 // copy key bindings
 project.assumeAllFilesLoaded();
 ["vim", "emacs"].forEach(function(keybinding) {
+    var source = [
+        copy.source.commonjs({
+            project: cloneProject(project),
+            require: [ 'ace/keyboard/keybinding/' + keybinding ]
+        })
+    ];
     copy({
-        source: [
+        source: source,
-            copy.source.commonjs({
+        filter: modeThemeFilters,
-                project: cloneProject(project),
-                require: [ 'ace/keyboard/keybinding/' + keybinding ]
-            })
-        ],
-        filter: [ copy.filter.moduleDefines, copy.filter.uglifyjs, filterTextPlugin ],
         dest: "build/src/keybinding-" + keybinding + ".js"
     });
+    copy({
+        source: source,
+        filter: [namespace(NAMESPACE)].concat(modeThemeFilters),
+        dest: "build/src/keybinding-" + keybinding + "-noconflict.js"
+    });
 });
 
 function demo() {

build_support/boot.js

@@ -1,40 +0,0 @@
-/* ***** BEGIN LICENSE BLOCK *****
- * Version: MPL 1.1/GPL 2.0/LGPL 2.1
- *
- * The contents of this file are subject to the Mozilla Public License Version
- * 1.1 (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- * http://www.mozilla.org/MPL/
- *
- * Software distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
- * for the specific language governing rights and limitations under the
- * License.
- *
- * The Original Code is Mozilla Skywriter.
- *
- * The Initial Developer of the Original Code is
- * Mozilla.
- * Portions created by the Initial Developer are Copyright (C) 2009
- * the Initial Developer. All Rights Reserved.
- *
- * Contributor(s):
- *      Kevin Dangoor (kdangoor@mozilla.com)
- *
- * Alternatively, the contents of this file may be used under the terms of
- * either the GNU General Public License Version 2 or later (the "GPL"), or
- * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
- * in which case the provisions of the GPL or the LGPL are applicable instead
- * of those above. If you wish to allow use of your version of this file only
- * under the terms of either the GPL or the LGPL, and not to allow others to
- * use your version of this file under the terms of the MPL, indicate your
- * decision by deleting the provisions above and replace them with the notice
- * and other provisions required by the GPL or the LGPL. If you do not delete
- * the provisions above, a recipient may use your version of this file under
- * the terms of any one of the MPL, the GPL or the LGPL.
- *
- * ***** END LICENSE BLOCK ***** */
-
-require(["ace/ace"], function(ace) {
-    window.ace = ace;
-});

build_support/editor.html

@@ -28,7 +28,7 @@
     }
 }</pre>
     
-<script src="src/ace-uncompressed.js" type="text/javascript" charset="utf-8"></script>
+<script src="src/ace-uncompressed-noconflict.js" type="text/javascript" charset="utf-8"></script>
 <script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
 <script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
 <script>

build_support/editor_textarea.html

@@ -44,76 +44,49 @@ function foo() {
 </div>
 
 <script>
-function inject() {
+
+function inject(callback) {
     var baseUrl = "src/";
-    function load(path, module, callback) {
+    
-        path = baseUrl + path;
+    var load = window.__ace_loader__ = function(path, module, callback) {
-        if (!load.scripts[path]) {
+        var head = document.getElementsByTagName('head')[0];
-            load.scripts[path] = {
+        var s = document.createElement('script');
-                loaded: false,
+    
-                callbacks: [ callback ]
+        s.src = baseUrl + path;
-            };
+        head.appendChild(s);
-
+        
-            var head = document.getElementsByTagName('head')[0];
+        s.onload = function() {
-            var s = document.createElement('script');
+            window.__ace_shadowed__.require([module], callback);
-
+        };
-            function c() {
-                if (window.__ace_shadowed__ && window.__ace_shadowed__.define.modules[module]) {
-                    load.scripts[path].loaded = true;
-                    load.scripts[path].callbacks.forEach(function(callback) {
-                        callback();
-                    });
-                } else {
-                    setTimeout(c, 50);
-                }
-            };
-            s.src = path;
-            head.appendChild(s);
-
-            c();
-        } else if (load.scripts[path].loaded) {
-            callback();
-        } else {
-            load.scripts[path].callbacks.push(callback);
-        }
     };
 
-    load.scripts = {};
+    load('ace-uncompressed-noconflict.js', "ace/ext/textarea", function() {
-    window.__ace_shadowed_load__ = load;
-
-    load('ace.js', 'text!ace/css/editor.css', function() {
         var ace = window.__ace_shadowed__;
+        
         ace.options.mode = "javascript";
         var Event = ace.require("ace/lib/event");
         var areas = document.getElementsByTagName("textarea");
         for (var i = 0; i < areas.length; i++) {
             Event.addListener(areas[i], "click", function(e) {
                 if (e.detail == 3) {
-                    ace.transformTextarea(e.target);
+                    ace.transformTextarea(e.target, load);
                 }
             });
         }
+        callback();
     });
 }
 
 // Call the inject function to load the ace files.
-inject();
-
 var textAce;
-function initAce() {
+inject(function () {
+    // Transform the textarea on the page into an ace editor.
     var ace = window.__ace_shadowed__;
-    // Check if the ace.js file was loaded already, otherwise check back later.
+    var t = document.querySelector("textarea");
-    if (ace && ace.transformTextarea) {
+    textAce = ace.transformTextarea(t, window.__ace_loader__);
-        var t = document.querySelector("textarea");
+    textAce.setDisplaySettings(true);
-        textAce = ace.transformTextarea(t);
+});
-        textAce.setDisplaySettings(true);
-    } else {
-        setTimeout(initAce, 100);
-    }
-}
 
-// Transform the textarea on the page into an ace editor.
-initAce();
 
 document.getElementById("buBuild").onclick = function() {
     var injectSrc = inject.toString().split("\n").join("");

build_support/mini_require.js

@@ -42,7 +42,9 @@
  */
  
 (function() {
-    
+
+var ACE_NAMESPACE = "";
+
 var global = (function() {
     return this;
 })();
@@ -69,11 +71,6 @@ var _define = function(module, deps, payload) {
         
     _define.modules[module] = payload;
 };
-if (global.define)
-    _define.original = global.define;
-    
-global.define = _define;
-
 
 /**
  * Get at functionality define()ed using the function above
@@ -108,15 +105,6 @@ var _require = function(parentId, module, callback) {
     }
 };
 
-if (global.require)
-    _require.original = global.require;
-    
-global.require = function(module, callback) {
-    return _require("", module, callback);
-};
-
-global.require.packaged = true;
-
 var normalizeModule = function(parentId, moduleName) {
     // normalize plugin requires
     if (moduleName.indexOf("!") !== -1) {
@@ -137,7 +125,6 @@ var normalizeModule = function(parentId, moduleName) {
     return moduleName;
 };
 
-
 /**
  * Internal function to lookup moduleNames and resolve them by calling the
  * definition function if needed.
@@ -174,4 +161,30 @@ var lookup = function(parentId, moduleName) {
     return module;
 };
 
+function exportAce(ns) {
+    var require = function(module, callback) {
+        return _require("", module, callback);
+    };
+    require.packaged = true;
+    
+    var root = global;
+    if (ns) {
+        if (!global[ns])
+            global[ns] = {};
+        root = global[ns];
+    }
+        
+    if (root.define)
+        _define.original = root.define;
+    
+    root.define = _define;
+
+    if (root.require)
+        _require.original = root.require;
+    
+    root.require = require;
+}
+
+exportAce(ACE_NAMESPACE);
+
 })();

build_support/mini_require_textarea.js

@@ -1,171 +0,0 @@
-/* ***** BEGIN LICENSE BLOCK *****
- * Version: MPL 1.1/GPL 2.0/LGPL 2.1
- *
- * The contents of this file are subject to the Mozilla Public License Version
- * 1.1 (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- * http://www.mozilla.org/MPL/
- *
- * Software distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
- * for the specific language governing rights and limitations under the
- * License.
- *
- * The Original Code is Ajax.org Code Editor (ACE).
- *
- * The Initial Developer of the Original Code is
- * Ajax.org B.V.
- * Portions created by the Initial Developer are Copyright (C) 2010
- * the Initial Developer. All Rights Reserved.
- *
- * Contributor(s):
- *      Fabian Jakobs <fabian AT ajax DOT org>
- *      Julian Viereck <julian.viereck@gmail.com>
- *
- * Alternatively, the contents of this file may be used under the terms of
- * either the GNU General Public License Version 2 or later (the "GPL"), or
- * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
- * in which case the provisions of the GPL or the LGPL are applicable instead
- * of those above. If you wish to allow use of your version of this file only
- * under the terms of either the GPL or the LGPL, and not to allow others to
- * use your version of this file under the terms of the MPL, indicate your
- * decision by deleting the provisions above and replace them with the notice
- * and other provisions required by the GPL or the LGPL. If you do not delete
- * the provisions above, a recipient may use your version of this file under
- * the terms of any one of the MPL, the GPL or the LGPL.
- *
- * ***** END LICENSE BLOCK ***** */
-
-/**
- * Define a module along with a payload
- * @param module a name for the payload
- * @param payload a function to call with (require, exports, module) params
- */
-
-(function() {
-
-var _define = function(module, deps, payload) {
-    if (typeof module !== 'string') {
-        if (_define.original)
-            _define.original.apply(window, arguments);
-        else {
-            console.error('dropping module because define wasn\'t a string.');
-            console.trace();
-        }
-        return;
-    }
-
-    if (arguments.length == 2)
-        payload = deps;
-
-    if (!_define.modules)
-        _define.modules = {};
-        
-    _define.modules[module] = payload;
-};
-
-/**
- * Get at functionality define()ed using the function above
- */
-var _require = function(parentId, module, callback) {
-    if (Object.prototype.toString.call(module) === "[object Array]") {
-        var params = [];
-        for (var i = 0, l = module.length; i < l; ++i) {
-            var dep = lookup(parentId, module[i]);
-            if (!dep && _require.original)
-                return _require.original.apply(window, arguments);
-            params.push(dep);
-        }
-        if (callback) {
-            callback.apply(null, params);
-        }
-    }
-    else if (typeof module === 'string') {
-        var payload = lookup(parentId, module);
-        if (!payload && _require.original)
-            return _require.original.apply(window, arguments);
-        
-        if (callback) {
-            callback();
-        }
-    
-        return payload;
-    }
-    else {
-        if (_require.original)
-            return _require.original.apply(window, arguments);
-    }
-};
-
-_require.packaged = true;
-_require.noWorker = true;
-
-var normalizeModule = function(parentId, moduleName) {
-    // normalize plugin requires
-    if (moduleName.indexOf("!") !== -1) {
-        var chunks = moduleName.split("!");
-        return normalizeModule(parentId, chunks[0]) + "!" + normalizeModule(parentId, chunks[1]);
-    }
-    // normalize relative requires
-    if (moduleName.charAt(0) == ".") {
-        var base = parentId.split("/").slice(0, -1).join("/");
-        moduleName = base + "/" + moduleName;
-        
-        while(moduleName.indexOf(".") !== -1 && previous != moduleName) {
-            var previous = moduleName;
-            moduleName = moduleName.replace(/\/\.\//, "/").replace(/[^\/]+\/\.\.\//, "");
-        }
-    }
-    
-    return moduleName;
-};
-
-/**
- * Internal function to lookup moduleNames and resolve them by calling the
- * definition function if needed.
- */
-var lookup = function(parentId, moduleName) {
-
-    moduleName = normalizeModule(parentId, moduleName);
-
-    var module = _define.modules[moduleName];
-    if (!module) {
-        return null;
-    }
-
-    if (typeof module === 'function') {
-        var exports = {};
-        var mod = {
-            id: moduleName, 
-            uri: '',
-            exports: exports
-        };
-        
-        var req = function(module, callback) {
-            return _require(moduleName, module, callback);
-        };
-        
-        var returnValue = module(req, exports, mod);
-        exports = returnValue || mod.exports;
-            
-        // cache the resulting module object for next time
-        _define.modules[moduleName] = exports;
-        return exports;
-    }
-
-    return module;
-};
-
-
-/**
- * Expose as "shadowed" object to the outside world.
- */
-
-window.__ace_shadowed__ = {
-    require: function(module, callback) {
-        return _require("", module, callback);
-    },
-    define: _define
-};
-
-})();

lib/ace/ext/textarea.js

@@ -36,42 +36,14 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-(function() {
+define(function(require, exports, module) {
 
-var require = window.__ace_shadowed__.require;
+var Event = require("../lib/event");
-
+var UA = require("../lib/useragent");
-var Dom = require("ace/lib/dom");
+var net = require("../lib/net");
-var Event = require("ace/lib/event");
+var ace = require("../ace");
-var UA = require("ace/lib/useragent")
-
-var Editor = require("ace/editor").Editor;
-var EditSession = require("ace/edit_session").EditSession;
-var UndoManager = require("ace/undomanager").UndoManager;
-var Renderer = require("ace/virtual_renderer").VirtualRenderer;
-
-window.__ace_shadowed__.edit = function(el) {
-    if (typeof(el) == "string") {
-        el = document.getElementById(el);
-    }
-
-    var doc = new EditSession(Dom.getInnerText(el));
-    doc.setUndoManager(new UndoManager());
-    el.innerHTML = '';
-
-    var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
-    editor.setSession(doc);
-
-    var env = {};
-    env.document = doc;
-    env.editor = env;
-    editor.resize();
-    Event.addListener(window, "resize", function() {
-        editor.resize();
-    });
-    el.env = env;
-    return editor;
-};
 
+require("ace/theme/textmate");
 
 /**
  * Returns the CSS property of element.
@@ -100,7 +72,7 @@ var getCSSProperty = function(element, container, property) {
 };
 
 function applyStyles(elm, styles) {
-    for (style in styles) {
+    for (var style in styles) {
         elm.style[style] = styles[style];
     }
 }
@@ -185,7 +157,7 @@ function setupContainer(element, getValue) {
                 if (oldSumit) {
                     oldSumit.call(this, evt);
                 }
-            }
+            };
             break;
         }
         parentNode = parentNode.parentNode;
@@ -193,7 +165,7 @@ function setupContainer(element, getValue) {
     return container;
 }
 
-window.__ace_shadowed__.transformTextarea = function(element) {
+exports.transformTextarea = function(element, loader) {
     var session;
     var container = setupContainer(element, function() {
         return session.getValue();
@@ -251,9 +223,6 @@ window.__ace_shadowed__.transformTextarea = function(element) {
     container.appendChild(settingDiv);
 
     // Power up ace on the textarea:
-    var ace = window.__ace_shadowed__;
-    var require = ace.require;
-    var define  = ace.define;
     var options = {};
 
     var editor = ace.edit(editorDiv);
@@ -266,7 +235,7 @@ window.__ace_shadowed__.transformTextarea = function(element) {
     editorDiv.appendChild(settingOpener);
 
     // Create the API.
-    var api = setupApi(editor, editorDiv, settingDiv, ace, options);
+    var api = setupApi(editor, editorDiv, settingDiv, ace, options, loader);
 
     // Create the setting's panel.
     setupSettingPanel(settingDiv, settingOpener, api, options);
@@ -274,9 +243,16 @@ window.__ace_shadowed__.transformTextarea = function(element) {
     return api;
 };
 
-function setupApi(editor, editorDiv, settingDiv, ace, options) {
+function load(url, module, callback) {
+    net.loadScript(url, function() {
+        require([module], callback);
+    });
+}
+
+function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
     var session = editor.getSession();
     var renderer = editor.renderer;
+    loader = loader || load;
 
     function toBool(value) {
         return value == "true";
@@ -290,8 +266,6 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
         setOption: function(key, value) {
             if (options[key] == value) return;
 
-            var load = window.__ace_shadowed_load__;
-
             switch (key) {
                 case "gutter":
                     renderer.setShowGutter(toBool(value));
@@ -300,19 +274,19 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
                 case "mode":
                     if (value != "text") {
                         // Load the required mode file. Files get loaded only once.
-                        load("mode-" + value + ".js", "ace/mode/" + value, function() {
+                        loader("mode-" + value + "-noconflict.js", "ace/mode/" + value, function() {
-                            var aceMode = require("ace/mode/" + value).Mode;
+                            var aceMode = require("../mode/" + value).Mode;
                             session.setMode(new aceMode());
                         });
                     } else {
-                        session.setMode(new (require("ace/mode/text").Mode));
+                        session.setMode(new (require("../mode/text").Mode));
                     }
                 break;
 
                 case "theme":
                     if (value != "textmate") {
                         // Load the required theme file. Files get loaded only once.
-                        load("theme-" + value + ".js", "ace/theme/" + value, function() {
+                        loader("theme-" + value + "-noconflict.js", "ace/theme/" + value, function() {
                             editor.setTheme("ace/theme/" + value);
                         });
                     } else {
@@ -354,7 +328,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
 
                 case "showPrintMargin":
                     renderer.setShowPrintMargin(toBool(value));
-                break
+                break;
 
                 case "showInvisibles":
                     editor.setShowInvisibles(toBool(value));
@@ -371,10 +345,10 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
         getOptions: function() {
             return options;
         }
-    }
+    };
 
-    for (var option in ace.options) {
+    for (var option in exports.options) {
-        ret.setOption(option, ace.options[option]);
+        ret.setOption(option, exports.options[option]);
     }
 
     return ret;
@@ -384,7 +358,7 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
     var BOOL = {
         "true":  true,
         "false": false
-    }
+    };
 
     var desc = {
         mode:            "Mode:",
@@ -395,7 +369,7 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
         showPrintMargin: "Show Print Margin:",
         useSoftTabs:     "Use Soft Tabs:",
         showInvisibles:  "Show Invisibles"
-    }
+    };
 
     var optionValues = {
         mode: {
@@ -465,7 +439,7 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
     table.push("<table><tr><th>Setting</th><th>Value</th></tr>");
 
     function renderOption(builder, option, obj, cValue) {
-        builder.push("<select title='" + option + "'>")
+        builder.push("<select title='" + option + "'>");
         for (var value in obj) {
             builder.push("<option value='" + value + "' ");
 
@@ -477,7 +451,7 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
                 obj[value],
                 "</option>");
         }
-        builder.push("</select>")
+        builder.push("</select>");
     }
 
     for (var option in options) {
@@ -497,7 +471,7 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
                 var option = select.title;
                 var value  = select.value;
                 api.setOption(option, value);
-            }
+            };
         })();
         selects[i].onchange = onChange;
     }
@@ -507,16 +481,16 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
     button.value = "Hide";
     button.onclick = function() {
         api.setDisplaySettings(false);
-    }
+    };
     settingDiv.appendChild(button);
 
     settingOpener.onclick = function() {
         api.setDisplaySettings(true);
-    }
+    };
 }
 
 // Default startup options.
-window.__ace_shadowed__.options = {
+exports.options = {
     mode:               "text",
     theme:              "textmate",
     gutter:             "false",
@@ -525,6 +499,6 @@ window.__ace_shadowed__.options = {
     showPrintMargin:    "false",
     useSoftTabs:        "true",
     showInvisibles:     "true"
-}
+};
 
-})()
+});