Add Elm support to CodeMirror 6

v6
1

Hi folks!

First of all, CodeMirror is great, thanks!

Second, I’d like to contribute, but wanted to double check if what I’m planning makes sense or if there’s any similar efforts already.

I’d love your feedback! :slight_smile:

Goal: have Elm support in Chrome Devtools “Source” tab. I want at least code highlighting, but it would be great to have formatting too.

Steps:

  1. Make sure that Chrome uses CodeMirror
  2. Figure out how to make CodeMirror changes reach Chrome
  3. Figure out how to add support for a new language to CodeMirror
  4. Do the work!

Step 1. Make sure that Chrome uses CodeMirror

I found a Google Blog post in which they mention upgrading to CodeMirror 6 and link to a Chromium issue, fixed in Dec 22. (The issue also says that they used version 5 before, which is expected in the context.)

Step 2. Figure out how to make CodeMirror changes reach Chrome

I found CodeMirror stuff in Chromium codebase and will look more closely.

My guess is that non-breaking changes are picked automatically when they update, but would be great to be certain and also to have some kind o ETA.

Step 3. Figure out how to add support for a new language to CodeMirror

I found a legacy-mode for Elm, but my understanding so far is that v6 doesn’t use these anymore, and that we need to rewrite them. This idea also makes sense because Chrome Devtools doesn’t highlight Elm right now and they use v6. But please, feel free to correct me if I’m wrong.

I couldn’t find any docs exactly on how to add support for new languages, but did find an old issue with some guidance that seems to apply. In particular:

Well, I finally have at least the start of a story here—there’s documentation and a mostly working (see #120) build process.

If you have a component you want to work on, open an issue to start discussion on how to approach it (or that is clear to you, a pull request).

Then:

  • Write lezer grammars (or port tree-sitter grammars) for popular languages. This requires a bit of familiarity with parsing, but there’s a lot of work to do here.

And then:

Yes, see the repositories that sound like languages in https://github.com/lezer-parser

Step 4. Do the work!

Well, hahah… write some code?

What do you think?

I’d love to hear your feedback on this!

2

The package you linked is a CodeMirror 6 package that bundles the old CodeMirror 5 modes for use with version 6. You don’t get all features (i.e. no code folding or syntax-structured selection motion) with such a mode, but it’s a reasonable way to get basic Elm support.

But Chrome has its own explicit set of language modes that they bundle with the devtools. Just adding something to CodeMirror won’t automatically make support show up there. Some of these (Dart, Go, Kotlin, Scala, …) appear to use legacy modes. So what you could try is opening an issue on the Chrome bug tracker asking them to wire up Elm support in a similar way.

3

Cool, thanks for your answer. Created a Chromium issue to track this.

Do you think my plan makes sense if I want to add more support for Elm?