I want use ace , how?

[brighthas]

https://github.com/ajaxorg/ace

how configure ?

[guybedford]

The questions are usually the same for this sort of thing -

• Where is the best place to load the library from? npm / github? Which repos can we trust?
• What module format is the library available in? Is SystemJS detecting the module format correctly or do we need to add shim configuration?
• Where is the main entry point relative to the package folder structure?

In terms of adding these configurations to existing packages, read https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm.

It can be quite fine getting this correct, but the great thing about jspm is once you have configured a package, it is configured for everyone.

[guybedford]

I will also look into this when I have some time as well.

[guybedford]

I've managed to get Ace working. I'm listing the steps I took here, and hopefully others can learn how to do this better as well:

• Looking at https://github.com/ajaxorg/ace, it is clear this is a repo with a lot of development assets, so already it is uncertain whether we want to be loading all of that.
• Scrolling down through the README, there was a link to a build-only repo located at https://github.com/ajaxorg/ace-builds
• I then tried System.import('github:ajaxorg/ace-builds/src/ace').then(console.log.bind(console)).catch(console.error.bind(console)) in the console on the jspm.io website (can be quicker than manually installing when testing stuff out).
• This gave the SystemJS error - AMD module github:ajaxorg/[email protected]/src/ace did not define
• Looking at the source file, it was clear it was doing a non-standard AMD check for RequireJS only, which was failing.
• So now I installed it manually with this override:

  jspm install github:ajaxorg/ace-builds -o "{ directories: { lib: 'src' }, main: 'ace', format: 'global' }"

• The above directories.lib means we don't need to have ace/src/ace and can load paths without the src prefix. We set the main and format to global as that is the only other option at this point.
• This then showed an object looking like { ace: ..., require: ... }, which was still not the right object.
• I then updated the override to include the export name:

  jspm install github:ajaxorg/ace-builds -o "{ directories: { lib: 'src' }, main: 'ace', format: 'global', shim: { ace: { exports: 'ace' } } }" -f

• This has the -f flag because its already installed so we need to override the previous install.
• Finally I refreshed the test page and got the correct object for Ace.

Now that it is working, I created a pull request at the jspm registry - jspm/registry@44e9d4a

This adds ace so that now anyone can install it with:

  jspm install ace

and

  System.import('ace')

I hope that makes some sense and helps here. Questions welcome.

[izengliang]

very cool ! 💯

[ivanbacher]

@leogiese and @guybedford where you also able to change the theme and the mode of the editor?

[meded90]

if anyone will have problems with Web Workers

define(function(require, exports, module) {
   var worker_html = require('ace/worker-html.js!text');
   var worker_css = require('ace/worker-css.js!text');
   var worker_javascript = require('ace/worker-javascript.js!text');

    var toUrlString = function (response) {
        var blob;
        try {
            blob = new Blob([response], {type: 'application/javascript'});
        } catch (e) { // Backwards-compatibility
            window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
            blob = new BlobBuilder();
            blob.append(response);
            blob = blob.getBlob();
        }
       return URL.createObjectURL(blob);
    };

    var old = window.Worker;
    window.Worker = function (name) {
        if (name === 'worker-html.js')
            name = toUrlString(worker_html);
        if (name === 'worker-css.js')
            name = toUrlString(worker_css);
        if (name === 'worker-javascript.js')
            name = toUrlString(worker_javascript);
        return new old(name)
    }
});

[fxck]

Anyone talked to @nightwing about possibility of making the loading work in systemjs without having to hack around?