(Twoslash) Bug: Two files in a single codeblock can fail

[juancampa]

Describe the bug

When using the twoslash plugin, if you have a codeblock with multiple files, for example:

// @filename module.ts

...

// @filename index.ts
import * from "module";

...

Typescript will fail to compile because it can't find the module named module.

After digging into it, I noticed that the first @filename was missing by the time the code reaches twoslash. It turns out that the ec "frames" plugin is stripping it away.

The fix is to use this config:

{
  plugins: [ecTwoSlash({})],
  frames: {
    extractFileNameFromCode: false,
  },
},

It wasn't obvious at all and it makes the plugin feel broken. Should we add it to these instructions in the docs?

[Adammatthiesen]

Hi, the // @filename syntax is actually part of the Show Emitted Files system that is part of Twoslash (more specifically the Twoslash VFS) and is not yet supported in EC-Twoslash

Though this information does help me understand part of the reasons things with the Twoslash VFS system aren't working with EC-Twoslash, i actually pull in the full raw code block and overwrite it with the Twoslashed output... so the filename tags are supposed to still be there in the code since i use one of the earliest EC hooks available to plugins to process the whole code block.

A good part of this issue is actually related to the way Twoslash VFS works... or well doesn't work with EC. And have been trying to get a better understanding of what they (Twoslash) are doing under the hood to be able to re-implement this system within EC correctly.

I have an open issue: twoslashes/twoslash#59 but have not gotten any responses.

[hippotastic]

If changing the config of the default plugin plugin-frames actually fixes this, I'd consider this an EC issue I can fix rather than a Twoslash issue. I could ensure that the special @filename syntax is ignored by the frames plugin in order not to interfere with Twoslash.

As my default plugins get prepended to the plugins array internally by the expressive-code package, it could very well be that the plugin-frames processing runs before your Twoslash plugin is able to access the code.