Write Adobe extensions in ES6 + Better debugging experience (basically a bag of hacks to get ES6 support in ExtendScript. includes LiveReload and console.log / console.error support from ExtendScript to CEF's remote console, React, Redux and Redux remote devtools)
Boilerplate code for a CEP Panel extension.
At the moment this setup works best (is only tested) on OSX 10.12.1 and After Effects CC 2017.
It uses shims from the ExtendScript/extendscript-es5-shim
and vespakoen/extendscriptkit
package to make working with ExtendScript joyful again.
git clone https://github.com/vespakoen/extendscript-boilerplate.git
cd extendscript-boilerplate
npm install
npm start
Running npm start
will do a couple of things:
defaults write com.adobe.CSXS.__VERSION_GOES_HERE__ PlayerDebugMode 1;
), this will allow the extension to be loaded without being signed./Library/Application\ Support/Adobe/CEP/extensions
folderWhen the debugger opens (make sure to start Adobe and load up the extension first!), go to the settings page (icon in the top right) and disable source-maps.
If you don't disable source-maps, you will get WEBSOCKET_CLOSED
errors.
To build your extension for production, run npm run prod
, this will bundle your code and minify it.
If npm start
is running successfully, and you enabled the extension in Adobe, you can start making changes to the code.
Whenever you make a change, the packager will see this and recompile your code and notify the Panel about the change through LiveReload.
Code for the panel resides within the js/
folder, you can use the futuristic import / export
syntax, but a CommonJS style require / module.exports
is fine too.
If you want to run Node.js code from the Panel, make sure to use the nodeRequire()
function!
This boilerplate has setup a SASS compiler, see the style.scss
file in the root of this project.
ExtendScript code lives in the jsx/
folder and you can use ES6 + modules syntax (import / export) there as well!
By default it loads shims from extendscriptkit
to make "console.log" and "console.error" available within ExtendScript.
The log will show up in the ExtendScript Toolkit, the Chrome Remote Debugger and when you log an error it will also show up in the Panel's window.
To communicate from ExtendScript to the Panel, you can use the dispatch(type, data)
function which can be imported from extendscriptkit/jsx/bridge
.