Blog / Decoration support in 0.0.21

The release of @codemovie/code-movie 0.0.21 adds support Decorations! A very minor breaking change is very unlikely to affect anyone who previously used Code.Movie, so you can probably update to the latest version right away.

Feature: Decorations

Decorations are finally available! You can add highlights, gutter icons and underlines (and much more once you get creative with CSS) to your animations:

function add(a: number, b: number): number {
  return a + b;
}

add(23, "42"); // ← This is wrong

function add(a: number, b: number): number {
  return a + b; // ← This is an important line
}

add(23, "42");

function add(a: number, b: number): number {
  return a + b;
}

➡️add(23, "42"); // ← Pay attention to this line

function add(a: number, b: number): number {
  return a + b;
}

✅add(23, 42); // ← This works now!

function add(a: number, b: number): number {
  return a + b;
}

add(23, 42); // ← This returns   

function add(a: number, b: number): number {
  return a + b;
}

👌add(23, 42); // ← This returns 65

Like with code, you add decorations declaratively to each code frame and let the library worry about computing the animation. Decorations are a fairly powerful feature and not without some complexity. But since they can really elevate your animations to the next level, learning how they work is definitely worth it. And speaking of learning...

Features: better docs

The docs have been thoroughly restructured and large parts were rewritten from the ground up. The introduction of decoration also required a huge expansion of the CSS reference.

Breaking: auto-incrementing root class seed

Code.Movie auto-generates class names for the animations based on a seed value. This seed value can be changed via the option rootClassSeed when calling animateHTML() or toAnimationHTML(), but this was (and remains) optional:

import { animateHTML } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

let html = animateHTML(
  [
    /* keyframes */
  ],
  {
    tabSize: 2,
    language: json(),
    rootClassSeed: 42, // optional
  },
);

import { animateHTML } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

let html = animateHTML(
  [
    /* keyframes */
  ],
  {
    tabSize: 2,
    language: json(),
    rootClassSeed: 42, // optional
  },
);

This seed value used to default to 0, which meant that (unless a custom seed value was provided) two animations in a single page could suffer from class collisions. This default value arguably did more harm than good, so 0.0.21 changes it to an auto-incrementing number, starting with a random large integer. If you rely on reproducing the same class names each time you call animateHTML() or toAnimationHTML(), be sure to pass the same number as the rootClassSeed option.

Other changes and bugfixes

• Less cryptic errors for various invalid inputs
• No more unintended line breaks in selectable text due to rounding errors in browsers
• Improved heuristics for ECMAScript
• Fixed several bugs around TypeScript interfaces, added support for using in TypeScript

What's next?

As long as nobody starts to clamor for more languages, the next feature will be a way to override animation heuristics. If you have other requests for languages or features, open an issue or contact me via email or Mastodon.