Skip to main content
J
JeremyBoissinot
Known Participant
August 2, 2018
Answered

CEP extension gets broken when including jsx files

  • August 2, 2018
  • 2 replies
  • 4080 views

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

This topic has been closed for replies.
Correct answer Trevor:

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

2 replies

sberic
sberic
Legend
August 6, 2018

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:
Trevor:
Legend
August 28, 2018
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

    Trevor:
    Trevor:
    Legend
    August 2, 2018

    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.

    J
    JeremyBoissinotAuthor
    Known Participant
    August 2, 2018

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

    Loic.Aigon
    Loic.Aigon
    Legend
    August 6, 2018

    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);
                }
            }
        }
    };
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices