Blog / JSX support and language modules in 0.0.15

The release of @codemovie/code-movie 0.0.15 adds support for JSX syntax in both JavaScript and TypeScript. It also fundamentally changes the way you load and configure languages, which will break existing code. Please review the changelog before updating to the latest version.

Language Modules

Adding support for Elixir in 0.0.14 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 is somewhat less convenient than just passing strings like "json" and "typescript" around, but it solves the performance problem and also opens the door for configurable languages. Speaking of which...

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 vanillaJavaScript = 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 vanillaJavaScript = ecmascript();
let typeScript = ecmascript({ ts: true });
let javaScriptWithJSX = ecmascript({ jsx: true });
let typeScriptWithJSX = ecmascript({ ts: true, jsx: true });

ECMAScript is currently the only language that takes configuration options, but this will probably change.

Other updates

• Minor improvements to TypeScript support
• Playground support for JavaScript with JSX and TypeScript with JSX
• The docs now include a comprehensive changelog
• The Elixir processor no longer crashes when confronted with an empty input string

What's next?

The next supported language will probably be Rust. If you have other requests for languages or features, open an issue or contact me via email or Mastodon.