Merge pull request #2014 from ajaxorg/build

Use architect-build for building ace

Makefile

@@ -13,7 +13,6 @@ pre_build:
 build: pre_build
 	./Makefile.dryice.js normal
 	./Makefile.dryice.js demo
-	./Makefile.dryice.js bm
 
 # Minimal build: call Makefile.dryice.js only if our sources changed
 basic: build/src/ace.js

build_support/bookmarklet.html

@@ -20,7 +20,7 @@ function foo() {
     var bar = true;
 }</textarea><br>
         SourceUrl: <br>
-        <input id="srcURL" style="width:300px" value="http://ajaxorg.github.com/ace-builds/textarea/src/"></input><br>
+        <input id="srcURL" style="width:300px" value="http://ajaxorg.github.com/ace-builds/src-noconflict"></input><br>
         <button id="buBuild">Build Link</button> <br> <a href="#"></a>
         <a href="https://github.com/ajaxorg/ace/">
             <div class="fork_on_github" ></div>
@@ -49,63 +49,60 @@ function foo() {
 
 <script>
 
-function inject(callback) {
-    var baseUrl = "src/";
+function inject(options, callback) {
+    var baseUrl = options.baseUrl || "../../src-noconflict";
     
-    var load = window.__ace_loader__ = function(path, module, callback) {
+    var load = function(path, callback) {
         var head = document.getElementsByTagName('head')[0];
         var s = document.createElement('script');
-    
-        s.src = baseUrl + path;
+
+        s.src = baseUrl + "/" + path;
         head.appendChild(s);
-        
-        s.onload = function() {
-            window.__ace_shadowed__.require([module], callback);
+
+        s.onload = s.onreadystatechange = function(_, isAbort) {
+            if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
+                s = s.onload = s.onreadystatechange = null;
+                if (!isAbort)
+                    callback();
+            }
         };
     };
 
-    load('ace-bookmarklet.js', "ace/ext/textarea", 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, load);
-                }
-            });
-        }
-        callback && callback();
+    load("ace.js", function() {
+        ace.config.loadModule("ace/ext/textarea", function() {
+            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, options.ace);
+                    }
+                });
+            }
+            callback && callback();
+        });
     });
 }
 
 // Call the inject function to load the ace files.
 var textAce;
-inject(function () {
-    // Transform the textarea on the page into an ace editor.
-    var ace = window.__ace_shadowed__;
+inject({}, function () {
+    // Transform the textarea on the page into an ace editor.    
     var t = document.querySelector("textarea");
-    textAce = ace.transformTextarea(t, window.__ace_loader__);
+    textAce = ace.require("ace/ext/textarea").transformTextarea(t);
     setTimeout(function(){textAce.setDisplaySettings(true)});
 });
 
 
 document.getElementById("buBuild").onclick = function() {
     var injectSrc = inject.toString().split("\n").join("");
-    injectSrc = injectSrc.replace('baseUrl = "src/"', 'baseUrl="' + document.getElementById("srcURL").value + '"');
-
-    var aceOptions = textAce.getOptions();
-    var opt = [];
-    for (var option in aceOptions) {
-        opt.push(option + ":'" + aceOptions[option] + "'");
-    }
-    injectSrc = injectSrc.replace('ace.options.mode = "javascript"', 'ace.options = { ' + opt.join(",") + ' }');
     injectSrc = injectSrc.replace(/\s+/g, " ");
 
+    var options = textAce.getOptions();
+    options.baseUrl = document.getElementById("srcURL").value;
+
     var a = document.querySelector("a");
-    a.href = "javascript:(" + injectSrc + ")()";
+    a.href = "javascript:(" + injectSrc + ")(" + JSON.stringify(options) + ")";
     a.innerHTML = "Ace Bookmarklet Link";
 }
 

demo/requirejs+build.html

@@ -29,14 +29,20 @@
 }</pre>
 
 <script src="../demo/kitchen-sink/require.js"></script>
-<script src="../build/src/ace.js" charset="utf-8"></script>
 <script>
-    var editor = ace.edit("editor");
-    editor.setTheme("ace/theme/twilight");
-    editor.session.setMode("ace/mode/javascript");
-    require(["ace/requirejs/text!src/ace"], function(e){
-        editor.setValue(e);
-    })
+    require.config({paths: {ace: "../build/src"}})
+    define('testace', ['ace/ace'],
+        function(ace, langtools) {
+            console.log("This is the testace module");
+            var editor = ace.edit("editor");
+            editor.setTheme("ace/theme/twilight");
+            editor.session.setMode("ace/mode/javascript");
+            require(["ace/requirejs/text!src/ace"], function(e){
+                editor.setValue(e);
+            })
+        }
+    );
+    require(['testace'])
 </script>
 
 </body>

kitchen-sink.html

@@ -11,16 +11,10 @@
       commit  %commit%
     -->
 
-    <!--DEVEL-->
-      <link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
-      <script async="true" src="https://use.edgefonts.net/source-code-pro.js"></script>
-    <!--DEVEL-->
+    <link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
+    <script async="true" src="https://use.edgefonts.net/source-code-pro.js"></script>
 
     <link href="./doc/site/images/favicon.ico" rel="icon" type="image/x-icon">
-    <!--PACKAGE
-      <link rel="stylesheet" href="kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
-      <script async="true" src="https://use.edgefonts.net/source-code-pro.js"></script>
-    PACKAGE-->
 </head>
 <body>
 <div id="optionsPanel" style="position:absolute;height:100%;width:260px">
@@ -287,7 +281,7 @@
   <script src="src/ace.js" data-ace-base="src" type="text/javascript" charset="utf-8"></script>
   <script src="src/keybinding-vim.js"></script>
   <script src="src/keybinding-emacs.js"></script>
-  <script src="kitchen-sink/demo.js"></script>
+  <script src="demo/kitchen-sink/demo.js"></script>
   <script type="text/javascript" charset="utf-8">
     require("kitchen-sink/demo");
   </script>

lib/ace/ext/textarea.js

@@ -155,7 +155,7 @@ function setupContainer(element, getValue) {
     return container;
 }
 
-exports.transformTextarea = function(element, loader) {
+exports.transformTextarea = function(element, options) {
     var session;
     var container = setupContainer(element, function() {
         return session.getValue();
@@ -215,9 +215,8 @@ exports.transformTextarea = function(element, loader) {
     applyStyles(settingDiv, settingDivStyles);
     container.appendChild(settingDiv);
 
+    options = options || exports.defaultOptions;
     // Power up ace on the textarea:
-    var options = {};
-
     var editor = ace.edit(editorDiv);
     session = editor.getSession();
 
@@ -228,10 +227,10 @@ exports.transformTextarea = function(element, loader) {
     container.appendChild(settingOpener);
 
     // Create the API.
-    setupApi(editor, editorDiv, settingDiv, ace, options, loader);
+    setupApi(editor, editorDiv, settingDiv, ace, options, load);
 
     // Create the setting's panel.
-    setupSettingPanel(settingDiv, settingOpener, editor, options);
+    setupSettingPanel(settingDiv, settingOpener, editor);
 
     var state = "";
     event.addListener(settingOpener, "mousemove", function(e) {
@@ -296,37 +295,15 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
     };
 
     editor.$setOption = editor.setOption;
+    editor.$getOption = editor.getOption;
     editor.setOption = function(key, value) {
-        if (options[key] == value) return;
-
         switch (key) {
             case "mode":
-                if (value != "text") {
-                    // Load the required mode file. Files get loaded only once.
-                    loader("mode-" + value + ".js", "ace/mode/" + value, function() {
-                        var aceMode = require("../mode/" + value).Mode;
-                        session.setMode(new aceMode());
-                    });
-                } else {
-                    session.setMode(new (require("../mode/text").Mode));
-                }
+                editor.$setOption("mode", "ace/mode/" + value)
             break;
-
             case "theme":
-                if (value != "textmate") {
-                    // Load the required theme file. Files get loaded only once.
-                    loader("theme-" + value + ".js", "ace/theme/" + value, function() {
-                        editor.setTheme("ace/theme/" + value);
-                    });
-                } else {
-                    editor.setTheme("ace/theme/textmate");
-                }
+                editor.$setOption("theme", "ace/theme/" + value)
             break;
-
-            case "fontSize":
-                editorDiv.style.fontSize = value;
-            break;
-
             case "keybindings":
                 switch (value) {
                     case "vim":
@@ -341,58 +318,55 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
             break;
 
             case "softWrap":
-                switch (value) {
-                    case "off":
-                        session.setUseWrapMode(false);
-                        renderer.setPrintMarginColumn(80);
-                    break;
-                    case "40":
-                        session.setUseWrapMode(true);
-                        session.setWrapLimitRange(40, 40);
-                        renderer.setPrintMarginColumn(40);
-                    break;
-                    case "80":
-                        session.setUseWrapMode(true);
-                        session.setWrapLimitRange(80, 80);
-                        renderer.setPrintMarginColumn(80);
-                    break;
-                    case "free":
-                        session.setUseWrapMode(true);
-                        session.setWrapLimitRange(null, null);
-                        renderer.setPrintMarginColumn(80);
-                    break;
-                }
+            case "fontSize":
+                editor.$setOption(key, value);
             break;
             
             default:
                 editor.$setOption(key, toBool(value));
         }
-
-        options[key] = value;
     };
 
     editor.getOption = function(key) {
-        return options[key];
+        switch (key) {
+            case "mode":
+                return editor.$getOption("mode").substr("ace/mode/".length)
+            break;
+
+            case "theme":
+                return editor.$getOption("theme").substr("ace/theme/".length)
+            break;
+
+            case "keybindings":
+                var value = editor.getKeyboardHandler()
+                switch (value && value.$id) {
+                    case "ace/keyboard/vim":
+                        return "vim";
+                    case "ace/keyboard/emacs":
+                        return "emacs";
+                    default:
+                        return "ace";
+                }
+            break;
+
+            default:
+                return editor.$getOption(key);
+        }
     };
 
-    editor.getOptions = function() {
-        return options;
-    };
-
-    editor.setOptions(exports.options);
-
+    editor.setOptions(options);
     return editor;
 }
 
-function setupSettingPanel(settingDiv, settingOpener, editor, options) {
+function setupSettingPanel(settingDiv, settingOpener, editor) {
     var BOOL = null;
 
     var desc = {
         mode:            "Mode:",
-        gutter:          "Display Gutter:",
+        wrap:            "Soft Wrap:",
         theme:           "Theme:",
         fontSize:        "Font Size:",
-        softWrap:        "Soft Wrap:",
+        showGutter:      "Display Gutter:",
         keybindings:     "Keyboard",
         showPrintMargin: "Show Print Margin:",
         useSoftTabs:     "Use Soft Tabs:",
@@ -445,7 +419,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
             twilight:         "Twilight",
             vibrant_ink:      "Vibrant Ink"
         },
-        gutter: BOOL,
+        showGutter: BOOL,
         fontSize: {
             "10px": "10px",
             "11px": "11px",
@@ -453,7 +427,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
             "14px": "14px",
             "16px": "16px"
         },
-        softWrap: {
+        wrap: {
             off:    "Off",
             40:     "40",
             80:     "80",
@@ -476,7 +450,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
         if (!obj) {
             builder.push(
                 "<input type='checkbox' title='", option, "' ",
-                    cValue == "true" ? "checked='true'" : "",
+                    cValue + "" == "true" ? "checked='true'" : "",
                "'></input>"
             );
             return;
@@ -496,10 +470,10 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
         builder.push("</select>");
     }
 
-    for (var option in options) {
+    for (var option in exports.defaultOptions) {
         table.push("<tr><td>", desc[option], "</td>");
         table.push("<td>");
-        renderOption(table, option, optionValues[option], options[option]);
+        renderOption(table, option, optionValues[option], editor.getOption(option));
         table.push("</td></tr>");
     }
     table.push("</table>");
@@ -532,12 +506,12 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
 }
 
 // Default startup options.
-exports.options = {
-    mode:               "text",
+exports.defaultOptions = {
+    mode:               "javascript",
     theme:              "textmate",
-    gutter:             "false",
+    wrap:               "off",
     fontSize:           "12px",
-    softWrap:           "off",
+    showGutter:         "false",
     keybindings:        "ace",
     showPrintMargin:    "false",
     useSoftTabs:        "true",

package.json

@@ -17,7 +17,8 @@
         "asyncjs": "0.0.x",
         "jsdom": "0.2.x",
         "amd-loader": "~0.0.4",
-        "dryice": "0.4.10"
+        "dryice": "0.4.11",
+        "architect-build": "https://github.com/c9/architect-build/tarball/42723e152bb"
     },
     "mappings": {
         "ace": "."