Use After Effects 24.5.0x41 per-character styles

[fartinmartin]

Inspired by this post (in particular Volition74au's use of eval() in the comments), I've updated this lib for use with After Effects 24.5.0x41 per-character styles expressions—AKA markdown in a single TextLayer!

It strays a bit from the original, but maybe that makes sense given the new AE features.

An example expression with the new lib looks like:

const { parse } = footage('style-parser.jsx').sourceData.get();

const inputText = `# hello!

this next word will be *bold*
and this one will be _italic_

## but check this one out:

i will be ==highlighted==!!!`

const customParsers = [
  {
    style: 'highlight',
    matcher: /==(.+?)==/g,
    transforms: [
      { method: 'setFillColor', value: [1, 1, 0, 1] },
    ],
  },
];

const render = parse(inputText, customParsers);
render();

Here's a project file to play with: ae-md.zip

[fartinmartin]

Updated the API a bit:

const { parse } = footage("style-parser.jsx").sourceData.get();

const inputText = `# hello!

this next word will be *bold*
and this one will be _italic_

## but check this one out:

i will be ==highlighted==!!!`

const fontMap = {
  regular: "Menlo-Regular",
  bold: "Menlo-Bold",
  italic: "Menlo-Italic",
};

const customParsers = [
  {
    style: "highlight",
    matcher: /==(.+?)==/g,
    // styles map to AE's style methods (e.g. `setFillColor` becomes `fillColor`)
    styles: { fillColor: [1, 1, 0] },
  },
];

const render = parse({
  markdown: inputText,
  // optional props:
  fonts: fontMap,
  parsers: customParsers,
});

render();

Updated project file: ae-md.zip

[timhaywood]

Amazing work @fartinmartin, super impressed. This is a way better API/functionality. It would be nice to avoid the eval() though, so I might see if there's a cleaner way we can do that part (though maybe it doesn't matter!).

Was there a specific reason you created a local copy of rollup-plugin-ae-jsx?

[fartinmartin]

Thanks @timhaywood! Agreed—it would be nice to avoid eval() if possible!

Haha, yeah, as I started to reference functions in others I needed to export them in a get function scope, like you have done in your aefunctions.jsx lib. I've got a PR with this feature for rollup-plugin-ae-jsx as well if that's something you'd want to include in the plugin going forward!

[timhaywood]

Oh great idea! Wrapping everything in the get() function at compile time is a much better authoring experience.

I'll approve that PR first and then we can work on this one. Changed this to target a dev branch so we can work on it alongside main before merging.

[fartinmartin]

Nice! I just tested using reduce instead of eval and it seems to work!