motiondeveloper/rollup-plugin-ae-jsx

README

rollup-plugin-ae-jsx

A Rollup plugin which converts the ouput to After Effects compatible JSON for .jsx files.

Requirements

This plugin requires an LTS Node version (v8.0.0+) and Rollup v1.20.0+.

Install

Using npm:

npm install rollup-plugin-ae-jsx --save-dev

Usage

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 format es to ensure After Effects compatible files.

rollup-plugin-ae-jsx should be placed in plugins after any other plugins.

Then call rollup either via the CLI or the API.

Options

`wrap`

Type: boolean
Default: false

Wraps compiled code in a get() function. See Wrapping for more detail.

Process

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 ({})

Wrapping

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();