CEP extension gets broken when including jsx files

[JeremyBoissinot]

Hi,

I followed the "Getting Started with CEP Extensions" guide and was able to set up a custom panel with buttons that are linked to a jsx file with click event callbacks.

Everything works fine so far but I had to import some functions from a lib directory I installed in the extension folder structure with the following command and proper location - #include "../lib/file.jsx"- and this is where the problem comes.

Basically, when I include a file this way, the extension is broken as the function from the file in the lib directory doesn't seem to be called, also if I remove the include command, nothing happens and I'm not getting an error about the missing called function that doesn't exist in the main jsx file.

As such, I'm a bit confused and I was wondering if anyone has already experimented that issue?

Thanks,

Jeremy

[Trevor:]

If you load the jsx script using the manifest it doesn't know it's location and therefore won't know where the include is.

Try running the jsx script using JSX.js A Game Changer in Adobe HTML Extensions Development? | Creative-Scripts.com create a folder in the extensions root and call it jsx then after including JSX.js in you index.html file you can call the jsx script using jsx.evalFile('myScript.jsx') if the scripts in the jsx folder you don't need to include the path.

The script will know it's location and maybe will find the include scripts in the jsx folder. If that doesn't work you can just load the included files first using JSX.js.

[JeremyBoissinot]

Ok thanks for the help Trevor and I'll take a look at all of this.

[Loic.Aigon]

Since the beginning I use provided code within samples and never had issues with it :

/*
 * Consider this as the main JSX (extendscript) file for the
 * extension. This file loads all the other JSX files in
 * the project so that the functions inside them can be called
 * from the Javascript context.
 *
 * It is unlikely you will need to change this file.
 */
if(typeof($)=='undefined')
$={};
$._ext = {
    //Evaluate a file and catch the exception.
    evalFile : function(path) {
        try {
            $.evalFile(path);
        } catch (e) {alert("Exception:" + e);}
    },
    // Evaluate all the files in the given folder 
    evalFiles: function(jsxFolderPath) {
        var folder = new Folder(jsxFolderPath);
        if (folder.exists) {
            var jsxFiles = folder.getFiles("*.jsx");
            for (var i = 0; i < jsxFiles.length; i++) {
                var jsxFile = jsxFiles;
                $._ext.evalFile(jsxFile);
            }
        }
    }
};

[JeremyBoissinot]

Hi Trevor,

So, I finally had the chance to dig into your JSX module which I was able to properly set up by following your guidelines and thanks again for this.

The include of the lib files does work with your method but I'm now dealing with another issue.

In fact, I actually have a panel with a bunch a buttons that execute the same jsx file for which I need to pass on the value of the button that was clicked in order to run the corresponding process.

For doing this, I ended up using your replacement method so that I was basically able to replace the value of the variable I need to use with your __ method:

jsx.evalFile("script_file.jsx", {variable:"value"});

This works fine when I have no lib files that are included at the beginning of the jsx file but seems to be broken once I add my includes again.

Therefore, I was wondering if there'd be any potential conflicts when using replacements and includes or if you have any ideas that may cause this issue? Maybe I'm simply missing something here or do you think it'd be better to just include all the lib files in the js script as you recommended?

Thanks,

Jeremy

[Trevor: · Accepted solution]

Hi Jeremy,

The replace option will mess up the #include 😞 I think I can guarantee that.

The replace option retrospectively I think a bit of a gimmick.

I think the correct workflow would be for the script to be called using jsx.file without replace and use jsx.eval to run each button function.

so instead of

myScript.jsx

alert('{{replaceMe}}')

index.html

myButton.onClick="jsx.file('myScript.jsx',{replaceMe,'foo'})"

use

myScript.jsx

function myAlert(message){ alert(message)}

index.html

jsx.file('myScript.jsx')

myButton.onClick="jsx.eval('myAlert(\'foo\')')"

Besides the include issue this method is generally going to be preferable.

HTH

Trevor

[JeremyBoissinot]

Hi Trevor,

So I revised the code according to your advice and everything seems to be working well even with the various includes I use from the lib.

Thank you so much for your help,

Jeremy

[sberic]

joissinot  wrote

Everything works fine so far but I had to import some functions from a lib directory I installed in the extension folder structure with the following command and proper location - #include "../lib/file.jsx"- and this is where the problem comes.

Try the following:

// Includes:
//  (SEE: http://stackoverflow.com/a/14689556/5285364)
//@include ../lib/file.jsx

While the guide suggests that you use single or double quotes for the path (see page 233 of the JavaScript Tools Guide), the above example was lifted directly from our working codebase and doesn't feature those quotes.

Also, it may be necessary to put includes at the top of the file before any other logic. I've not tested this, but if you have your include statement further down in your script, you might try moving it up to the top...

Hope this helps.

[Trevor:]

sberic  wrote
Try the following:
// Includes: //  (SEE: http://stackoverflow.com/a/14689556/5285364) //@include ../lib/file.jsx

I just noticed the significance of what you wrote.

As stated After Effects / ExtendScript: Using libraries and importing .jsx files? - Stack Overflow

The

// @targetengine main

// @include myfile.jsx

Are much better as they don't mess the linters or auto formatters like the #targetengine does.

Never knew about the //@ method.

Thanks