SyntaxHighlighter fails to load with curl.js

[graouts]

I can't seem to load SyntaxHighlighter with curl.js, I always get the following in the WebKit console:

ReferenceError: Can't find variable: SyntaxHighlighter Error: define() missing or duplicated: shBrushJScript.js

I've created a Gist that should reproduce the issue https://gist.github.com/3349493. Is this a SyntaxHighlighter issue or a curl.js one?

[graouts]

I created an issue with SyntaxHighlighter in case it's a problem in that library: https://github.com/alexgorbatchev/SyntaxHighlighter/issues/143.

[unscriptable]

Which version of curl.js are you using? It looks like the ssjs module is in there. That's probably problem #1. :)

Also: it appears that SyntaxHighlighter is sorta-kinda-CJS, not AMD. Therefore, you either have to pre-wrap the SyntaxHighlighter files into a define(function (require, exports, module) { /* SyntaxHighlighter code goes here */ }); or use curl's cjsm11 transformer/plugin to load the file.

If you don't mind using the wrapper, that's probably the easiest way to get started.

-- J

[graouts]

This is curl-kitchen-sink version 0.6.7. Ideally, I'd be able to load SyntaxHighlighter without modifying its source, so I'd like to try the cjsm11 transform/plugin to load the file. Is there a wiki document to get me started?

[unscriptable]

oh ok. Never mind what I said about the ssjs shim. It checks to ensure it's not in a browser before modifying curl to work in a server-side environment.

The cjsm11 transform is still labelled as experimental for two reasons:

1. there is no build-time support for it, yet, and the run-time performance (without using a build tool) is not ideal
2. the name of the folder will change, as will the way the module is invoked*

At the moment, the cjsm11 transform just wraps the file in a define(function (require, exports, module) {}); (AMD's "commonjs wrapper") This is something you could do pretty easily by hand.

If you want to try the cjsm11 transform, you must configure a package to use the cjsm11 transformer:

var config = {
    // map a path to curl
    paths: { curl: 'path/to/curl/src/curl' },
    // describe the SyntaxHighlighter "package" and tell it to use the cjsm11 transformer
    packages: [
        { name: 'SyntaxHighlighter', location: 'path/to/folder', main: 'shCore', moduleLoader: 'curl/loader/cjsm11' }
    ]
};
// configure curl
curl(config);

• The property name "moduleLoader" will change to "transform" in curl 0.8 and will likely be placed under a "config" property.

[unscriptable]

Hey @graouts! What's the status on this issue? How's it going? -- J

[graouts]

Sorry for not replying sooner. Using the cjsm11 loader fails as well with the following error:

Error: define() missing or duplicated: ../../lib/SyntaxHighlighter/js/shCore.js

My code looks like this:

curl({
  baseUrl: '../../',
  packages: [
    { name: 'SyntaxHighlighter', location: 'lib/SyntaxHighlighter/js', main: 'shCore', moduleLoader: 'lib/curl/loader/cjsm11' }
  ]
});

curl(['SyntaxHighlighter'], function (SyntaxHighlighter) {
  // 
});

[unscriptable]

dang. sorry about giving you bad code. try this:

curl({
  baseUrl: '../../',
  packages: [
    { name: 'SyntaxHighlighter', location: 'lib/SyntaxHighlighter/js', main: 'shCore',  config: { moduleLoader: 'lib/curl/loader/cjsm11' } }
  ]
});

curl(['SyntaxHighlighter'], function (SyntaxHighlighter) {
  // 
});

[graouts]

I get a different error now, it seems curl is attempting to load a file that doesn't exist:

GET file:///Users/antoine/Pomme/code/foo/lib/curl/loader/cjsm11.js The requested URL was not found on this server.

That loader has an inline define in curl.js, doesn't it?

[unscriptable]

Are you sure curl/loader/cjsm11.js exists at that location?

Also: I am surprised curl is working at all with file:/// urls. Have you tried using it with a local web server?

-- John

[graouts]

There definitely isn't a curl/loader/cjsm11.js file, but in my curl.js file, I can see this:

define("curl/loader/cjsm11",function(){…});

[unscriptable]

oh, I see. I forgot that you are using a dist version of curl.js.

curl({
  baseUrl: '../../',
  packages: [
    { name: 'SyntaxHighlighter', location: 'lib/SyntaxHighlighter/js', main: 'shCore',  config: { moduleLoader: 'curl/loader/cjsm11' } }
  ]
});

curl(['SyntaxHighlighter'], function (SyntaxHighlighter) {
  // 
});

I changed the id of the moduleLoader to match what's inside the "kitchen sink" curl.js.

FWIW, this is what the module loader id should be anyways, but would require that you have a path or package configured for curl.

[graouts]

Not sure how helpful that error will be since the code is minified, but I think it's getting the wrong URL.

GET file:///Users/antoine/Pomme/code/foo/SyntaxHighlighter.js The requested URL was not found on this server. 

TypeError: 'undefined' is not a function (evaluating 'd.oa(c)') curl.js:33

[unscriptable]

file:/// urls don't work with AMD in most browsers. Have you tried using a local web server?

[graouts]

I get a similar issue with a server, in this case here's the URL it's trying to hit

GET http://localhost:8080/SyntaxHighlighter.js 404 (Not Found)

… and the JS error:

Error: fetchText() failed. status: Not Found 

[unscriptable]

weird. it's completely ignoring the { packages: {} } config. I'll set up a test case to try kitchen-sink + packages.

[unscriptable]

Hey @graouts, please try the latest (0.7.1). It fixes as issue that may have caused this problem. -- John