Code.Movie

Blog / Support for JSON with comments in 0.0.30

The release of Code.Movie 0.0.30 adds support for C-style comments in JSON, with no breaking changes. Code.Movie is a JavaScript library that animates source code for the web - imagine a combination of git diffs, syntax highlighting, code annotations and CSS transitions.

1234
[,]"World""Hello"
➡️🚫✅
[]
["World"]
["Hello", "World"]
[
  "Hello",
  "World"
]
[
  "World",
  "Hello"
]

New in 0.0.30: support for comments in JSON

The new boolean option comments for the JSON language module enables support for C-style comments:

123456
andblockcomments!*/JSONwithlinecomments!//{"editor.cursorStyle":"line","editor.fontFamily":"FiraCode"checkoutmyVScodeconfig,"editor.fontLigatures":false/*}comeandfightmeonsocialmedia:)!*/bestcodingfont...IFthisisfalse
➡️💪
// JSON with line comments!
{
  "editor.cursorStyle": "line"
}
// JSON with line comments!
{
  "editor.cursorStyle": "line" /* and block comments! */
}
// JSON with line comments!
{
  "editor.cursorStyle": "line" /* check out my VS code config */
}
// check out my VS code config
{
  "editor.cursorStyle": "line",
  "editor.fontFamily": "Fira Code" /* best coding font... */
}
// check out my VS code config
{
  "editor.cursorStyle": "line",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": false /* ... IF this is false! */
}
// check out my VS code config
{
  "editor.cursorStyle": "line",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": false /* come and fight me on social media! :) */
}

This is sometimes called "JSONC" and is, as far as I can tell, not really a proper standard. Is is however widely used (among other things in TypeScript's tsconfig.json), so I just made up a grammar and made it available as a dialect of JSON. To use it, load and instantiate the JSON module as per usual, but pass the option comments: true:

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

// unlocks line and block comments
let jsonWithComments = json({ comments: true });

let html = animateHTML([{ code: "[42 /* Hello */ ] // World" }], {
  tabSize: 2,
  language: jsonWithComments,
});
➡️➡️12345678910
import { animateHTML } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

// unlocks line and block comments
let jsonWithComments = json({ comments: true });

let html = animateHTML([{ code: "[42 /* Hello */ ] // World" }], {
  tabSize: 2,
  language: jsonWithComments,
});

The comments option is optional and JSON module continues to default so proper RFC8259-compliant JSON without support for comments. Support for JSON with comments has also been added to the playground.

Other changes in 0.0.30