Merge pull request #463 from ajaxorg/server-side-rendering

Server side rendering

Makefile

@@ -1,11 +1,11 @@
 build:
 	git rev-parse HEAD > .git-ref
 	mkdir -p build/src
-	mkdir -p build/demo
+	mkdir -p build/demo/kitchen-sink
 	mkdir -p build/textarea/src
 	
-	cp demo/styles.css build/demo/styles.css
-	cp demo/logo.png build/demo/logo.png
+	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
 	
 	./Makefile.dryice.js normal
 	./Makefile.dryice.js bm

Makefile.dryice.js

@@ -95,7 +95,7 @@ var aceProject = [
 ];
 
 if (target == "normal") {
-    aceProject.push(aceHome + '/demo');
+    //aceProject.push(aceHome + '/demo');
 
     copy({
         source: "build_support/editor.html",
@@ -349,7 +349,7 @@ function demo() {
         source: [
             copy.source.commonjs({
                 project: project,
-                require: [ "pilot/index", "ace/defaults", "demo/boot" ]
+                require: [ "pilot/index", "ace/defaults", "demo/kitchen-sink/boot" ]
             })
         ],
         filter: [ copy.filter.moduleDefines ],
@@ -358,8 +358,7 @@ function demo() {
     copy({
         source: {
             root: project,
-            include: /demo\/docs\/.*$/,
-            exclude: /tests?\//
+            include: /demo\/kitchen-sink\/docs\/.*$/,
         },
         filter: [ copy.filter.addDefines ],
         dest: demo
@@ -367,8 +366,7 @@ function demo() {
     copy({
         source: {
             root: project,
-            include: /.*\.css$/,
-            exclude: /tests?\//
+            include: /ace\/.*\.css$/,
         },
         filter: [ copy.filter.addDefines ],
         dest: demo
@@ -377,11 +375,11 @@ function demo() {
     copy({
         source: demo,
         filter: [ filterTextPlugin ],
-        dest: 'build/demo/kitchen-sink-uncompressed.js'
+        dest: 'build/demo/kitchen-sink/kitchen-sink-uncompressed.js'
     });
     copy({
         source: demo,
         filter: [ copy.filter.uglifyjs, filterTextPlugin ],
-        dest: 'build/demo/kitchen-sink.js'
+        dest: 'build/demo/kitchen-sink/kitchen-sink.js'
     });
 }

demo/kitchen-sink/boot.js

@@ -40,7 +40,7 @@ define(function(require, exports, module) {
 require("pilot/fixoldbrowsers");
 require("pilot/plugin_manager");
 require("pilot/environment");
-require("demo/demo");
+require("demo/kitchen-sink/demo");
 
 require("pilot/index");
 require("ace/defaults");
@@ -50,7 +50,7 @@ var catalog = require("pilot/plugin_manager").catalog;
 catalog.registerPlugins(plugins).then(function() {
     var env = require("pilot/environment").create();
     catalog.startupPlugins({ env: env }).then(function() {
-        require("demo/demo").launch(env);
+        require("demo/kitchen-sink/demo").launch(env);
     });
 });
 

demo/kitchen-sink/demo.js

@@ -125,7 +125,7 @@ exports.launch = function(env) {
         modesByName[m.name] = m;
     });
     
-    var loreIpsum = require("ace/requirejs/text!demo/docs/plaintext.txt");
+    var loreIpsum = require("ace/requirejs/text!demo/kitchen-sink/docs/plaintext.txt");
     for (var i = 0; i < 5; i++) {
         loreIpsum += loreIpsum;
     }
@@ -133,108 +133,108 @@ exports.launch = function(env) {
     var docs = [
         new Doc(
             "javascript", "JavaScript",
-            require("ace/requirejs/text!demo/docs/javascript.js")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/javascript.js")
         ),
         new WrappedDoc("text", "Plain Text", loreIpsum),
         new Doc(
             "coffee", "Coffeescript",
-            require("ace/requirejs/text!demo/docs/coffeescript.coffee")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/coffeescript.coffee")
         ),
         new Doc(
             "json", "JSON",
-            require("ace/requirejs/text!demo/docs/json.json")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/json.json")
         ),
         new Doc(
             "css", "CSS",
-            require("ace/requirejs/text!demo/docs/css.css")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/css.css")
         ),
         new Doc(
             "scss", "SCSS",
-            require("ace/requirejs/text!demo/docs/scss.scss")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/scss.scss")
         ),
         new Doc(
             "html", "HTML",
-            require("ace/requirejs/text!demo/docs/html.html")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/html.html")
         ),
         new Doc(
             "xml", "XML",
-            require("ace/requirejs/text!demo/docs/xml.xml")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/xml.xml")
         ),
         new Doc(
             "svg", "SVG",
-            require("ace/requirejs/text!demo/docs/svg.svg")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/svg.svg")
         ),
         new Doc(
             "php", "PHP",
-            require("ace/requirejs/text!demo/docs/php.php")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/php.php")
         ),
         new Doc(
             "coldfusion", "ColdFusion",
-            require("ace/requirejs/text!demo/docs/coldfusion.cfm")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/coldfusion.cfm")
         ),
         new Doc(
             "python", "Python",
-            require("ace/requirejs/text!demo/docs/python.py")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/python.py")
         ),
         new Doc(
             "ruby", "Ruby",
-            require("ace/requirejs/text!demo/docs/ruby.rb")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/ruby.rb")
         ),
         new Doc(
             "perl", "Perl",
-            require("ace/requirejs/text!demo/docs/perl.pl")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/perl.pl")
         ),
         new Doc(
             "ocaml", "OCaml",
-            require("ace/requirejs/text!demo/docs/ocaml.ml")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/ocaml.ml")
         ),
         new Doc(
             "lua", "Lua",
-            require("ace/requirejs/text!demo/docs/lua.lua")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/lua.lua")
         ),
         new Doc(
             "java", "Java",
-            require("ace/requirejs/text!demo/docs/java.java")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/java.java")
         ),
         new Doc(
             "clojure", "Clojure",
-            require("ace/requirejs/text!demo/docs/clojure.clj")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/clojure.clj")
         ),
         new Doc(
             "groovy", "Groovy",
-            require("ace/requirejs/text!demo/docs/groovy.groovy")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/groovy.groovy")
         ),
         new Doc(
             "scala", "Scala",
-            require("ace/requirejs/text!demo/docs/scala.scala")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/scala.scala")
         ),
         new Doc(
             "csharp", "C#",
-            require("ace/requirejs/text!demo/docs/csharp.cs")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/csharp.cs")
         ),
         new Doc(
             "powershell", "Powershell",
-            require("ace/requirejs/text!demo/docs/powershell.ps1")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/powershell.ps1")
         ),
         new Doc(
             "c_cpp", "C/C++",
-            require("ace/requirejs/text!demo/docs/cpp.cpp")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/cpp.cpp")
         ),
         new Doc(
             "markdown", "Markdown",
-            require("ace/requirejs/text!demo/docs/markdown.md")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/markdown.md")
         ),
         new WrappedDoc(
             "markdown", "Markdown",
-            require("ace/requirejs/text!demo/docs/markdown.md")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/markdown.md")
         ),
         new WrappedDoc(
             "textile", "Textile",
-            require("ace/requirejs/text!demo/docs/textile.textile")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/textile.textile")
         ),
         new WrappedDoc(
             "latex", "LaTeX",
-            require("ace/requirejs/text!demo/docs/latex.tex")
+            require("ace/requirejs/text!demo/kitchen-sink/docs/latex.tex")
         )
     ];
     

demo/static-highlighter/client.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Static Code highlighter using Ace</title>
+	<meta name="author" content="Fabian Jakobs">
+</head>
+<body>
+
+<h2>Client Side Syntax Highlighting</h2>
+
+<p>Syntax highlighting using Ace language modes and themes.</p>
+    
+<div id="code"></div>
+
+<script type="text/javascript">
+    var require = {
+        paths: {
+            demo: "..",
+            ace: "../../lib/ace",
+            pilot: "../../support/pilot/lib/pilot"
+        }
+    };
+</script>
+<script src="../kitchen-sink/require.js" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript" charset="utf-8">
+    
+require(["ace/ext/static_highlight", "ace/mode/javascript", "ace/theme/twilight", "pilot/dom"], function() {
+
+    var highlighter = require("ace/ext/static_highlight");
+    var JavaScriptMode = require("ace/mode/javascript").Mode;
+    var theme = require("ace/theme/twilight");
+    var dom = require("pilot/dom");
+
+    var codeEl = document.getElementById("code");
+    var data = document.body.innerHTML;
+
+    var highlighted = highlighter.render(data, new JavaScriptMode(), theme);
+
+    dom.importCssString(highlighted.css, "ace_highlight");
+    codeEl.innerHTML = highlighted.html;
+});
+    
+</script>
+</body>
+</html>

demo/static-highlighter/server.js

@@ -0,0 +1,36 @@
+/**
+ * Simple node.js server, which generates the synax highlighted version of itself 
+ * using the Ace modes and themes on the server and serving a static web page.
+ */
+
+// include ace search path and modules
+require("../../support/paths");
+
+// load jsdom, which is required by Ace
+require("ace/test/mockdom");
+
+var http = require("http");
+var fs = require("fs");
+
+// load the highlighter and the desired mode and theme
+var highlighter = require("ace/ext/static_highlight");
+var JavaScriptMode = require("ace/mode/javascript").Mode;
+var theme = require("ace/theme/twilight");
+
+var port = process.env.PORT || 2222;
+
+http.createServer(function(req, res) {
+    res.writeHead(200, {"Content-Type": "text/html"});
+    
+    fs.readFile(__filename, "utf8", function(err, data) {
+        var highlighted = highlighter.render(data, new JavaScriptMode(), theme);
+        res.end('<html><body>\n\
+<style type="text/css" media="screen">\n\
+    :css:\n\
+</style>\n\
+:html:\n\
+</body></html>'.replace(":css:", highlighted.css).replace(":html:", highlighted.html));
+    });
+}).listen(port);
+
+console.log("Listening on port " + port);

kitchen-sink.html

@@ -6,7 +6,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Ace Kitchen Sink</title>
     <meta name="author" content="Fabian Jakobs">
-    <link rel="stylesheet" href="demo/styles.css" type="text/css" media="screen" charset="utf-8">
+    <link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
     <!-- 
     
     Ace
@@ -16,7 +16,7 @@
     -->
 </head>
 <body>
-  <img id="logo" src="demo/logo.png">
+  <img id="logo" src="demo/kitchen-sink/logo.png">
   <table id="controls">
     <tr>
       <td>
@@ -189,20 +189,20 @@
   <script type="text/javascript">
       var require = {
           paths: {
-              demo: "../demo",
-              ace: "../lib/ace",
-              cockpit: "../support/cockpit/lib/cockpit",
-              pilot: "../support/pilot/lib/pilot"
+              demo: "..",
+              ace: "../../lib/ace",
+              cockpit: "../../support/cockpit/lib/cockpit",
+              pilot: "../../support/pilot/lib/pilot"
           }
       };
   </script>
-  <script src="demo/require.js" data-main="demo/boot" type="text/javascript" charset="utf-8"></script>
+  <script src="demo/kitchen-sink/require.js" data-main="demo/kitchen-sink/boot" type="text/javascript" charset="utf-8"></script>
 <!--DEVEL -->
   
 <!--PACKAGE
-  <script src="demo/kitchen-sink-uncompressed.js" data-ace-base="src" type="text/javascript" charset="utf-8"></script>
+  <script src="demo/kitchen-sink/kitchen-sink-uncompressed.js" data-ace-base="src" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    require("demo/boot");
+    require("demo/kitchen-sink/boot");
   </script>
 <!--PACKAGE-->
 

lib/ace/ext/static.css

@@ -0,0 +1,22 @@
+.ace_editor {
+   font-family: 'Monaco', 'Menlo', 'Droid Sans Mono', 'Courier New', monospace;
+   font-size: 12px;
+}
+
+.ace_editor .ace_gutter { 
+    width: 25px !important;
+    display: block;
+    float: left;
+    text-align: right; 
+    padding: 0 3px 0 0; 
+    margin-right: 3px;
+}
+
+.ace-row { clear: both; }
+
+*.ace_gutter-cell {
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}

lib/ace/ext/static_highlight.js

@@ -0,0 +1,95 @@
+/* vim:ts=4:sts=4:sw=4:
+ * ***** 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):
+ *      Jan Jongboom <fabian AT ajax DOT org>
+ *      Fabian Jakobs <fabian AT ajax DOT org>
+ *
+ * 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(function(require, exports, module) {
+
+var EditSession = require("ace/edit_session").EditSession;
+var TextLayer = require("ace/layer/text").Text;
+var baseStyles = require("ace/requirejs/text!ace/ext/static.css");
+
+/** Transforms a given input code snippet into HTML using the given mode
+*
+* @param {string} input Code snippet
+* @param {mode} mode Mode loaded from /ace/mode (use 'ServerSideHiglighter.getMode')
+* @param {string} r Code snippet
+* @returns {object} An object containing: html, css
+*/
+
+exports.render = function(input, mode, theme) {
+    var session = new EditSession("");
+    session.setMode(mode);
+    session.setUseWorker(false);
+    
+    var textLayer = new TextLayer(document.createElement("div"));
+    textLayer.setSession(session);
+    textLayer.config = {
+        characterWidth: 10,
+        lineHeight: 20
+    };
+    
+    session.setValue(input);
+            
+    var stringBuilder = [];
+    var length =  session.getLength();
+    var tokens = session.getTokens(0, length - 1);
+    
+    for(var ix = 0; ix < length; ix++) {
+        var lineTokens = tokens[ix].tokens;
+        stringBuilder.push("<div class='ace-row'>");
+        stringBuilder.push("<span class='ace_gutter ace_gutter-cell' unselectable='on'>" + (ix+1) + "</span>");
+        textLayer.$renderLine(stringBuilder, 0, lineTokens, true);
+        stringBuilder.push("</div>");
+    }
+    
+    // let's prepare the whole html
+    var html = "<div class=':cssClass'>\
+        <div class='ace_editor ace_scroller ace_text-layer'>\
+            :code\
+        </div>\
+    </div>".replace(/:cssClass/, theme.cssClass).replace(/:code/, stringBuilder.join(""));
+        
+    textLayer.destroy();
+            
+    return {
+        css: baseStyles + theme.cssText,
+        html: html
+    };
+};
+
+});

lib/ace/ext/static_highlight_test.js

@@ -0,0 +1,74 @@
+if (typeof process !== "undefined") {
+    require("../../../support/paths");    
+    require("ace/test/mockdom");
+}
+
+var assert = require("assert");
+var highlighter = require("./static_highlight");
+var JavaScriptMode = require("ace/mode/javascript").Mode;
+
+// Execution ORDER: test.setUpSuite, setUp, testFn, tearDown, test.tearDownSuite
+module.exports = {
+    timeout: 10000,
+    
+    "test simple snippet": function(next) {
+        var theme = require("ace/theme/tomorrow");
+        var snippet = "/** this is a function\n\
+*\n\
+*/\n\
+function hello (a, b, c) {\n\
+    console.log(a * b + c + 'sup?');\n\
+}";
+        var mode = new JavaScriptMode();
+        
+        var isError = false, result;
+        try {
+            result = highlighter.render(snippet, mode, theme);
+        }
+        catch (e) {
+            console.log(e);
+            isError = true;
+        }
+        // todo: write something more meaningful
+        assert.equal(isError, false);
+        
+        next();
+    },
+    
+    "test css from theme is used": function(next) {
+        var theme = require("ace/theme/tomorrow");
+        var snippet = "/** this is a function\n\
+*\n\
+*/\n\
+function hello (a, b, c) {\n\
+    console.log(a * b + c + 'sup?');\n\
+}";
+        var mode = new JavaScriptMode();
+        
+        var isError = false, result;
+        result = highlighter.render(snippet, mode, theme);
+        
+        assert.equal(result.css, theme.cssText);
+        
+        next();
+    },
+    
+    "test theme classname should be in output html": function (next) {
+        var theme = require("ace/theme/tomorrow");
+        var snippet = "/** this is a function\n\
+*\n\
+*/\n\
+function hello (a, b, c) {\n\
+    console.log(a * b + c + 'sup?');\n\
+}";
+        var mode = new JavaScriptMode();
+        
+        var isError = false, result;
+        result = highlighter.render(snippet, mode, theme);
+        assert.equal(!!result.html.match(/<div class='ace-tomorrow'>/), true);
+        
+        next();
+    }
+};
+
+!module.parent && require("asyncjs").test.testcase(module.exports).exec();

lib/ace/test/mockrenderer.js

@@ -161,4 +161,8 @@ MockRenderer.prototype.textToScreenCoordinates = function() {
     }
 };
 
+MockRenderer.prototype.adjustWrapLimit = function () {
+    
+};
+
 });

lib/ace/theme/tomorrow.js

@@ -37,9 +37,7 @@
 
 define(function(require, exports, module) {
 
-    var dom = require("pilot/dom");
-
-    var cssText = ".ace-tomorrow .ace_editor {\
+    exports.cssText = ".ace-tomorrow .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
 \
@@ -254,8 +252,5 @@ background-color:#8959A8;\
      \
 }";
 
-    // import CSS once
-    dom.importCssString(cssText);
-
     exports.cssClass = "ace-tomorrow";
 });

support/pilot

@@ -1 +1 @@
-Subproject commit c720ab56a80ba8cc10d0c86a9c4f1fa9cfc83b1b
+Subproject commit f1ac22a9bc806772ae68fd67d800fc0625518346