Fresh Perspective on Compiling with ACE

‹prev | My Chain | next›

Writing these posts is often like programming. And not in a good way.

The daily deadline forces me to push through to a solution regardless of propriety. Most days this is a good thing—I have to push myself to learn something that I did not know. Other days, I end up pushing through without taking a step back. Happily there is always tomorrow for that step back. And today is tomorrow.

I ran into a few roadblocks last night as I attempted to bundle all of the JavaScript in the ICE Code Editor. Using the Closure minifier, I hit a few JavaScript warnings. When I googled said warnings, I found similar issues from the ACE code editor project, which I am using as the editor in ICE. Oddly the problems seemed fixed earlier this year, but I bundled ACE less than a month ago.

Not knowing what else to do, I modified my local copy yesterday and moved on. A fresh look today reveals that the fine ACE folks did fix that bit of code way back in January. So, had I stopped to grab the most recent ACE yesterday, I could have save myself some trouble. Fresh perspective would have helped last night.

But fresh perspective today turns up something interesting that I had forgotten about ACE: they have several builds, including no-conflict and no-requirejs builds. They might just solve the other problem that I found last night: difficulty working with a web worker that helped with syntax highlighting.

I start by grabbing the latest vanilla release of the ACE files that I use:

➜  ace git:(api) ✗ ls -1
ace.js
keybinding-emacs.js
mode-css.js
mode-html.js
mode-javascript.js
theme-chrome.js
theme-textmate.js
worker-javascript.js

➜  ace git:(api) ✗ wget https://raw.github.com/ajaxorg/ace-builds/master/src/ace.js -O ace.js
➜  ace git:(api) ✗ wget https://raw.github.com/ajaxorg/ace-builds/master/src/keybinding-emacs.js -O keybinding-emacs.js
➜  ace git:(api) ✗ wget https://raw.github.com/ajaxorg/ace-builds/master/src/mode-css.js -O mode-css.js
➜  ace git:(api) ✗ wget https://raw.github.com/ajaxorg/ace-builds/master/src/mode-html.js -O mode-html.js
➜  ace git:(api) ✗ wget https://raw.github.com/ajaxorg/ace-builds/master/src/mode-javascript.js -O mode-javascript.js
➜  ace git:(api) ✗ wget https://raw.github.com/ajaxorg/ace-builds/master/src/theme-chrome.js -O theme-chrome.js
➜  ace git:(api) ✗ wget https://raw.github.com/ajaxorg/ace-builds/master/src/theme-textmate.js -O theme-textmate.js
➜  ace git:(api) ✗ wget https://raw.github.com/ajaxorg/ace-builds/master/src/worker-javascript.js -O worker-javascript.js

With that, I again run the closure compiler:

➜  code-editor git:(api) ✗ java -jar ~/local/java/compiler.jar \
    --js js/ace/ace.js \
         js/ace/keybinding-emacs.js \
         js/ace/mode-javascript.js \
         js/ace/theme-textmate.js \
         js/ace/theme-chrome.js \
         js/rawdeflate.js \
         js/rawinflate.js \
         js/appcache.js js/ice-*.js \
    > js/ice.js

This is different than last night because I do not have to ignore IE errors. And compilation works. So it seems the fine folks of ACE are really on top of things.

Happily, everything still works. The updated ACE even seems to have fix the minor display issue that I ran into last night. What is not working is the web worker. I still need to place it in the top-level of my web server for ACE to find it when compiled. Even if I try to compile it into the ice.js file:

➜  code-editor git:(api) ✗ java -jar ~/local/java/compiler.jar \
    --js js/ace/ace.js \
         js/ace/keybinding-emacs.js \
         js/ace/mode-javascript.js \
         js/ace/theme-textmate.js \
         js/ace/theme-chrome.js \
         js/ace/worker-javascript.js \
         js/rawdeflate.js \
         js/rawinflate.js \
         js/appcache.js js/ice-*.js \
    > js/ice.js

This still will not work. The bundled worker is ignored and a request is made for worker-javascript.js at the top-level of my web server. I even try switching to the no-conflict/non-requirejs version of ACE to no avail.

In the end, I have to set an undocumented (as far as I can tell) setting for ACE to get this to work:

ace.config.set("workerPath", "/js/ace");

With that, my HTML document only sources a single, large file:

<!DOCTYPE html>
<html>
  <head>
    <title>code editor</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="editor.css">
  </head>
  <body>
    // Web page content & code here...
  </body>
  <script src="js/ice.js"></script>
  <script>
    new ICE.Embedded(
      document.getElementById('code-001'),
      {preview_el: document.getElementById('preview-001')}
    );
  </script>
</html>

And I get a functioning editor and pane. And it only costs two requests (plus the requests from the code sample in the editor):



Best of all, I do not have to include the web worker in the root level of my web server. I would prefer to be able to eliminate the web-worker request entirely, but I can live with this for now.



Day #727