A Rollup plugin which converts the ouput to After Effects compatible JSON for .jsx
files.
This plugin requires an LTS Node version (v8.0.0+) and Rollup v1.20.0+.
Using npm:
npm install rollup-plugin-ae-jsx --save-dev
Create a rollup.config.js
configuration file, import the plugin, and add it to the plugins
array:
import afterEffectJsx from './rollup-plugin-ae-jsx';
import pkg from './package.json';
export default {
input: 'src/index.ts',
output: {
file: 'dist/index.jsx',
format: 'es',
},
external: Object.keys(pkg.dependencies),
plugins: [afterEffectJsx()],
};
- The output extension should be
.jsx
and formates
to ensure After Effects compatible files.rollup-plugin-ae-jsx
should be placed inplugins
after any other plugins.
Then call rollup
either via the CLI or the API.
Type: boolean
Default: false
Wraps compiled code in a get()
function. See Wrapping for more detail.
- Creating a list of the exported functions and variables from the index file
- Removing non-compatible statements:
['ExpressionStatement', 'DebuggerStatement', 'ImportDeclaration', 'ExportNamedDeclaration'];
- Converting function and variable declarations into
.jsx
compliant syntax - Wrapping in braces (
{}
)
Compiling code that references top level functions or variables will error when run in After Effects, since each exported property is isolated from the surrounding code.
For example the following source code:
function add(a, b) {
return a + b;
}
function getFour() {
return add(2, 2);
}
export { add, getFour };
Will compile to the following .jsx
file:
{
add(a, b) {
return a + b;
},
getFour() {
return add(2, 2); // error, add is not defined
}
}
Which will error, since add()
is not defined within the scope of getFour()
.
This can be solved by wrapping all of your code in a parent function, which rollup-plugin-jsx
will do for you if wrap
is set to true.
// rollup.config.js
plugins: [afterEffectJsx({ wrap: true })],
The compiled .jsx
would then be:
{
get() {
function add(a, b) {
return a + b;
}
function getFour() {
return add(2, 2);
}
return { add, getFour }
}
}
You then would need to call .get()
in your expressions:
const { getFour, add } = footage('index.jsx').sourceData.get();