Can Adobe .jsx scripts include other script files?

Question

We're writing a bunch of .jsx scripts and in each I have to mock out some functions so I can use things like Array.map() and String.trim(), but I don't want to have to include that code at the top of every script.

Is there a way to "include" other .jsx scripts inside of a .jsx script file?

Affiliate

I realized this is better suited for Graphic Design's stack exchange here: graphicdesign.stackexchange.com/questions/17007/… – Affiliate

Answer 1

Or you can simply use #include and #includepath preprocessor directives at the top of your script. You can find a detailed description in Adobe's "JavaScript Tools Guide".

For example, if you want to include scripts/helper.jsx in a .jsx file:

#include "scripts/helpers.jsx"
// the rest of your code below ...

Decurion

Been trying forever! Thanks :) – Johnniejohnny

I tried to inject jsx files contents from Premiere to AfterEffects via BridgeTalk. This works, but if I try to send the JSON library this way, it doesn't work. The solution was to only send #include "' + pathToScriptFile + '"; instead of the script contents. – Nunci

Answer 2

Just leaving this here for anyone like me who is looking for this. In Adobe Illustrator CC 2015, I was unable to get #include to work, but @include did. So for example:

External File: foo.jsx

function alertTheWordNo(){
  alert('NO');
}

The Script File: bar.jsx

//@include 'foo.jsx';
alertTheWordNo();

Disclaimer: I cannot find any documentation of this but have tested it with Adobe Illustrator CC 2015 and it works.

Hope this helps someone. If anyone has any questions just ask!

Bantustan

Adobe CC 2017 (v21.0.0) both #include and //@include work for me. At forums.adobe.com/thread/290259, I see "//@ is needed for backwards compatibility with CS and maybe CS2. This is documented in the JS Tools Guide in the ESTK chapter." So I guess that #include is preferable. – Lazarus

This will work, but you MUST add a CEFCommandLine argument to your manifest.xml allowing file access, or the primary JSX will seemingly not load or evaluate the external file! – Perception

Answer 3

We're now using the $ helper available in Illustrator, and the $.evalFile() method. Pass it a path and it will evaluate the file and return the result.

I created a little helper that I can include (minified, of course) at the top of my .jsx scripts so I can do Libraries.include("my-other-script") that will include, in my case, a file that's in my adobe_scripts root folder, in a directory called lib.

// indexOf polyfill from https://gist.github.com/atk/1034425
[].indexOf||(Array.prototype.indexOf=function(a,b,c){for(c=this.length,b=(c+~~b)%c;b<c&&(!(b in this)||this[b]!==a);b++);return b^c?b:-1;});

var Libraries = (function (libPath) {    
    return {
        include: function (path) {
            if (!path.match(/\.jsx$/i)) { 
                path = path + ".jsx"; 
            }
            return $.evalFile(libPath + path);
        }
    };
})($.fileName.split("/").splice(0, $.fileName.split("/").indexOf("adobe_scripts") + 1).join("/") + "/lib/");

Minified version that I include:

/**
 * Libraries.include(path) -- path must be relative to adobe_scripts/lib/
 * See: https://gist.github.com/jasonrhodes/5286526
 */
[].indexOf||(Array.prototype.indexOf=function(a,b,c){for(c=this.length,b=(c+~~b)%c;b<c&&(!(b in this)||this[b]!==a);b++);return b^c?b:-1;});var Libraries=function(a){return{include:function(b){return b.match(/\.jsx$/i)||(b+=".jsx"),$.evalFile(a+b)}}}($.fileName.split("/").splice(0,$.fileName.split("/").indexOf("adobe_scripts")+1).join("/")+"/lib/");

See gist here: https://gist.github.com/jasonrhodes/5286526

Affiliate

A better way is to use require from CommonJS for Photoshop. I think that works for all the apps on the suite. To include require.jsx just use "#include require.jsx". – Auditorium

How would I include a js file in jsx using require? @Auditorium – Constrained

Just use var _ = require('underscore'); Look at this source github.com/theiviaxx/PSLib/blob/master/lib/template.jsx – Auditorium

Answer 4

Just wanted to add a note to Ike10's answer. Undocumented is generous - this is the worst "documentation" I've ever come across in 20+ years of writing code. It seems to me that you must also add the CEFCommandLine argument to your manifest.xml file before the primary JSX file will load/eval external files:

<Resources>
    <MainPath>./whatever.html</MainPath>
    <ScriptPath>./jsx/whatever.jsx</ScriptPath>
    <CEFCommandLine>
        <Parameter>--allow-file-access</Parameter>
        <Parameter>--allow-file-access-from-files</Parameter>
    </CEFCommandLine>
</Resources>

Perception