Changelog

v 0.0.21

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.

Breaking: auto-incrementing root class seed

This library 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 would probably 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.

Bugfixes in 0.0.21

• General
  • make fromStringsToScene and animateHTML handle empty frame arrays without throwing cryptic errors
  • prevent unintended line breaks in selectable text due to rounding errors in browsers
• ECMAScript
  • add better heuristics when dealing with empty blocks and function expressions
  • fix a few bugs around TypeScript interfaces, support using in TypeScript

v 0.0.20

Feature: animateHTML(input, options)

This new function combines fromStringsToScene() and toAnimationHTML() into one slightly more convenient function. Where you previously had to wrangle two functions and two options objects...

import { fromStringsToScene, toAnimationHTML } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

let keyframes = [
  /* keyframes go here */
];

let html = toAnimationHTML(
  fromStringsToScene(keyframes, {
    tabSize: 2,
    language: json(),
  }),
  {
    rootClassSeed: 42,
  },
);

import { fromStringsToScene, toAnimationHTML } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

let keyframes = [
  /* keyframes go here */
];

let html = toAnimationHTML(
  fromStringsToScene(keyframes, {
    tabSize: 2,
    language: json(),
  }),
  {
    rootClassSeed: 42,
  },
);

You can now just import and call a single function to get the same effect:

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

let keyframes = [
  /* keyframes go here */
];

let html = animateHTML(keyframes, {
  tabSize: 2,
  language: json(),
  rootClassSeed: 42,
});

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

let keyframes = [
  /* keyframes go here */
];

let html = animateHTML(keyframes, {
  tabSize: 2,
  language: json(),
  rootClassSeed: 42,
});

The options object combines the options available to fromStringsToScene() and toAnimationHTML() into a single object. The old functions fromStringsToScene() and toAnimationHTML() are still available and will remain supported for the forseeable future.

Bugfixes in 0.0.20

• ECMAScript: better highlighting support for methods, getters and getters in object literals
• ECMAScript: fix highlighting support for while loops and super

v 0.0.19

Bugfixes in 0.0.19

• General: reduce download size of the npm module
• CSS: add proper highlighting support for @-rules

v 0.0.18

Breaking: theme object changes

The theme object has always contained some unused data for decorations (code underlines, gutter icons an similar). In preparation for the upcoming release of actual decoration support, the schema for this data has changed. If you have created your own theme object previously, you will need to perform the following modifications:

1. set version to 1
2. replace layers.decorations with the following:

let myTheme = {
  version: 1,
  /* ... other things... */
  layers: {
    /* ... other things... */
    decorations: {
      gutter: {
        kind: "DECORATION_GUTTER",
        offset: [0, 0],
      },
      line: {
        kind: "DECORATION_LINE",
        background: {
          endLeft: "scene",
          endRight: "scene",
          backdrop: {
            kind: "BACKDROP",
            value: {
              kind: "COLOR",
              value: "#FFF2BC",
            },
          },
        },
        foreground: {
          endLeft: "scene",
          endRight: "scene",
          backdrop: {
            kind: "BACKDROP",
            value: {
              kind: "COLOR",
              value: "#00000000",
            },
          },
        },
      },
      text: {
        kind: "DECORATION_TEXT",
        background: {
          backdrop: {
            kind: "BACKDROP",
            value: {
              kind: "COLOR",
              value: "#FFFF00",
            },
          },
          underline: {
            kind: "UNDERLINE",
            offsetY: 0,
            style: "none",
            color: {
              kind: "COLOR",
              value: "#000000",
            },
            scale: 1,
            width: 1,
          },
        },
        foreground: {
          backdrop: {
            kind: "BACKDROP",
            value: {
              kind: "COLOR",
              value: "#00000000",
            },
          },
          underline: {
            kind: "UNDERLINE",
            offsetY: 0,
            style: "none",
            color: {
              kind: "COLOR",
              value: "#000000",
            },
            scale: 1,
            width: 1,
          },
        },
      },
    },
    /* ... other things... */
  },
};

let myTheme = {
  version: 1,
  /* ... other things... */
  layers: {
    /* ... other things... */
    decorations: {
      gutter: {
        kind: "DECORATION_GUTTER",
        offset: [0, 0],
      },
      line: {
        kind: "DECORATION_LINE",
        background: {
          endLeft: "scene",
          endRight: "scene",
          backdrop: {
            kind: "BACKDROP",
            value: {
              kind: "COLOR",
              value: "#FFF2BC",
            },
          },
        },
        foreground: {
          endLeft: "scene",
          endRight: "scene",
          backdrop: {
            kind: "BACKDROP",
            value: {
              kind: "COLOR",
              value: "#00000000",
            },
          },
        },
      },
      text: {
        kind: "DECORATION_TEXT",
        background: {
          backdrop: {
            kind: "BACKDROP",
            value: {
              kind: "COLOR",
              value: "#FFFF00",
            },
          },
          underline: {
            kind: "UNDERLINE",
            offsetY: 0,
            style: "none",
            color: {
              kind: "COLOR",
              value: "#000000",
            },
            scale: 1,
            width: 1,
          },
        },
        foreground: {
          backdrop: {
            kind: "BACKDROP",
            value: {
              kind: "COLOR",
              value: "#00000000",
            },
          },
          underline: {
            kind: "UNDERLINE",
            offsetY: 0,
            style: "none",
            color: {
              kind: "COLOR",
              value: "#000000",
            },
            scale: 1,
            width: 1,
          },
        },
      },
    },
    /* ... other things... */
  },
};

Other improvements in 0.0.18

• A new styling hook --line-numbers-width contains the width of the line number column (if line numbers are enabled)
• Fix a whole class of bugs related to coordinate computation when astral symbols, emoji and CJK characters are involved
• Document typographic edge cases

Bugfixes in 0.0.18

• ECMAScript: add proper highlighting support for generator functions and associated features
• ECMAScript: add proper highlighting support for the typeof operator, the ?. operator the as keyword (in both TS and JS contexts)
• ECMAScript: fix several omissions around operators and literals like Infinity

v 0.0.17

New language: Rust

Support for Rust has landed! Simply import the language module @codemovie code-movie/languages/rust and go from there. Rust is a complex language that I personally know next to nothing about, so you can expect this first version to maybe miss some syntax and definitely have some sub-par animation heuristics. You can also expect this to improve over time.

Improvement: Code Splitting

Languages modules now benefit from code splitting, which removes a lot of previously duplicated code. This only applies to ESM modules but should greatly reduce the overall bundle size for all projects. All language modules that leverage the common parsing infrastructure or that make use of other languages modules (like JS and CSS being used in HTML to support <style> and <script>) will benefit from this change.

Bugfixes in 0.0.17

• ECMAScript: add support the ancient and deprecated with statement

Other changes in 0.0.17

• Playground: add a way to change the tab size
• Elixir: improve diffing heuristics

v 0.0.16

Bugfixes in 0.0.16

• General: most language parsers crashed when encountering certain non-terminated string-like language constructs
• CSS: the value set by --cm-content-margin-left was erroneously always multiplied by two
• TypeScript: add support for the declare keyword and associated syntax, like namespaces
• ECMAScript: add proper support for regular expressions and the accessor keyword
• Docs: fixed various typos and missing words, add missing docs for Elixir
• Work around chrome's inability to deal with long selector lists

v 0.0.15

Breaking: language modules

Adding support for Elixir in 0.0.13 increased the bundle size considerably, which made modularizing the entire project necessary. Languages are now modules that need to be imported and instantiated explicitly:

// Main module imports like before
import { fromStringsToScene, toAnimationHTML } from "@codemovie/code-movie";

// NEW: import the language module you want to use
import json from "@codemovie/code-movie/languages/json";

// NEW: instantiate the language. Some languages can be configured to support
// certain features by passing options to the language function (eg. enable JSX
// support in ECMAScript by passing `{ jsx: true }`)
const language = json();

let sceneData = fromStringsToScene(
  [
    /* ...keyframes... */
  ],
  {
    tabSize: 2,
    language, // NEW: now the language object instead of a string
  },
);

let html = toAnimationHTML(sceneData);

// Main module imports like before
import { fromStringsToScene, toAnimationHTML } from "@codemovie/code-movie";

// NEW: import the language module you want to use
import json from "@codemovie/code-movie/languages/json";

// NEW: instantiate the language. Some languages can be configured to support
// certain features by passing options to the language function (eg. enable JSX
// support in ECMAScript by passing `{ jsx: true }`)
const language = json();

let sceneData = fromStringsToScene(
  [
    /* ...keyframes... */
  ],
  {
    tabSize: 2,
    language, // NEW: now the language object instead of a string
  },
);

let html = toAnimationHTML(sceneData);

This change breaks the following APIs:

• The InputOptions passed to fromStringsToScene() as its second argument must now be an object returned from a language function instead of a string referring to the language name
• fromStringsToScene() now returns an object containing the Scene object and the language object that was originally passed in the InputOptions
• The first argument to toAnimationHTML() must now be an object containing the scene object and the language object used to create the scene (in other words, it still takes the output of fromStringsToScene() as its first argument, but the actual object is slightly different)
• The main module exports SUPPORTED_LANGUAGES (set of language names) and Language (TypeScript union type of language names) do no longer exist

The following language modules are currently available:

• @codemovie/code-movie/languages/css
• @codemovie/code-movie/languages/ecmascript (for JavaScript and TypeScript)
• @codemovie/code-movie/languages/elixir
• @codemovie/code-movie/languages/html
• @codemovie/code-movie/languages/json
• @codemovie/code-movie/languages/plaintext

Improvement: JSX support for JavaScript and TypeScript

The language module @codemovie/code-movie/languages/ecmascript enables support for JSX in both TypeScript and vanilla JavaScript:

import ecmascript from "@codemovie/code-movie/languages/ecmascript";

let regularJavaScript = ecmascript();
let typeScript = ecmascript({ ts: true });
let javaScriptWithJSX = ecmascript({ jsx: true });
let typeScriptWithJSX = ecmascript({ ts: true, jsx: true });

import ecmascript from "@codemovie/code-movie/languages/ecmascript";

let regularJavaScript = ecmascript();
let typeScript = ecmascript({ ts: true });
let javaScriptWithJSX = ecmascript({ jsx: true });
let typeScriptWithJSX = ecmascript({ ts: true, jsx: true });

Improvement: optional ranges and decorations

The fields ranges and decorations on InputFrames (the first argument to fromStringsToScene()) are now optional and default to empty arrays. They will be empty for most frames anyway and filling in the blanks is trivial. Plus it makes the tutorial shorter!

Bugfixes in 0.0.15

The bugfixes all revolve around plugging small to medium-sized holes in language support:

• Elixir:
  • an empty string as input was causing exceptions
  • the diff algorithm had too little meta information on do blocks to reliably produce non-confusing results
• TypeScript:
  • template literal types with interpolations inside were missing their non-interpolation bits (the actual string parts of a template literal type)
  • readonly in index signatures and the infer keyword were not properly detected
• ECMAScript:
  • curly braces for object literals and switch bodies were not properly detected
  • the break and continue keywords were not properly detected

Other changes in in 0.0.15

Adjusted some magic numbers in the token matchup functions. This should provide an overall improved diffing behavior.

v 0.0.14

Improve stability and add support for Elixir.

v 0.0.13

Initial public release.