The Problem

• I have JavaScript-like files with extension .gml
• I can convert the source to valid JavaScript via magic-string, and can go back the other way using trace-mapping.
• I want to leverage Typescript on my .gml files to get strong Intellisense, e.g. by:
  • Creating a Typescript "program" that acts on the .gml->.js transpiled files and reports issues back; and
  • Creating a VSCode extension that proxies functionality to the Typescript language server and reverse-source-maps the results back to the editor.
• It feels like there should be a relatively straight forward and generalizable approach to this, but my experiments have not worked out. Reference projects are either for much-more-complex scenarios or much simpler ones, and documentation on the matter is very light.

Prior Art

VueJS and Svelte use custom filetypes (.vue and .svelte), which they pre-process into valid Typescript, HTML, and CSS prior to proxying through to those respective language servers.

Their use cases are far more complicated than mine, and their code bases to accomplish this are extensive. I'm hoping to find a much more streamlined approach.

Possible approaches

I've had a little luck following the Svelte approach of creating a Typescript service and hooking up VSCode operations onto it, but this is extremely tedious.

I suspect that there's some possibility of using a Typescript plugin, but as far as I can tell that approach doesn't support using non-js/ts extensions nor source maps.

In any case I know I'll have to do significant work with the to-and-from-sourcemap conversions, but ideally that's the only difficult work I'd need to do.

Questions

• Have you seen any examples in the wild of people solving a similar problem, or solved similar problems yourself?
• Are there any deep-dive write-ups about this (I've found a few shallow ones)?
• Is the plugin approach viable?
• What are the possible ways to get non-js/ts extensions recognized by Typescript?