7

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?

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
rhodesjason
  • 4,904
  • 9
  • 43
  • 59
  • I realized this is better suited for Graphic Design's stack exchange here: http://graphicdesign.stackexchange.com/questions/17007/can-adobe-illustrator-jsx-scripts-include-other-script-files/17014 – rhodesjason Apr 02 '13 at 01:21

4 Answers4

18

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 ...
jbranchaud
  • 5,909
  • 9
  • 45
  • 70
Armin
  • 181
  • 4
  • Been trying forever! Thanks :) – Chris Sprague Apr 24 '21 at 18:48
  • 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. – Guntram Feb 03 '22 at 15:54
3

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!

Ike10
  • 1,585
  • 12
  • 14
  • Adobe CC 2017 (v21.0.0) both #include and //@include work for me. At https://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. – Andy Swift Nov 16 '17 at 12:23
  • 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! – ineedhelp Jun 14 '19 at 19:59
0

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

rhodesjason
  • 4,904
  • 9
  • 43
  • 59
  • 1
    A better way is to use [require](https://github.com/theiviaxx/PSLib/blob/master/require.jsx) from [CommonJS for Photoshop](https://github.com/theiviaxx/PSLib). I think that works for all the apps on the suite. To include require.jsx just use "#include require.jsx". – jkutianski Mar 11 '14 at 18:35
  • How would I include a js file in jsx using require? @jkutianski – FabricioG Mar 04 '19 at 19:09
  • 1
    Just use `var _ = require('underscore');` Look at this source https://github.com/theiviaxx/PSLib/blob/master/lib/template.jsx – jkutianski Mar 06 '19 at 15:41
0

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>
ineedhelp
  • 227
  • 1
  • 15