Feature Request: Support HTML-style comments for cut functionality in Twoslash

[Fro-Q]

Problem

I'm using Twoslash in a VitePress project and encountered an issue where I need to display an error for a named import in a Vue SFC. Specifically, I have a TypeScript file posts.data.ts that only has a default export, but I'm attempting to import it in a Vue SFC using a named import, which should trigger an error.

Here's the relevant part of my markdown content:

<script>
// ---cut-start---
// @filename: ../src/posts.data.ts
import { createContentLoader } from "vitepress";

export default createContentLoader("posts/*.md", {
// ...
});
// ---cut-end---
</script>

<script setup lang="ts">
// @errors: 2614
import { data as posts } from "../src/posts.data";
// ...
</script>

<template>
  <!-- ... -->
</template>

This setup correctly displays the error I want. However, I noticed that the cut functionality only works with JavaScript-style comments (//), which means it cannot hide the <script> and </script> tags (lines 1 and 10).

Request

Would it be possible to extend the cut functionality to support HTML-style comments? For example, something like this:

<!-- ---cut-start--- -->
<script>
// @filename: ../src/posts.data.ts
import { createContentLoader } from "vitepress";

export default createContentLoader("posts/*.md", {
// ...
});
</script>
<!-- ---cut-end--- -->

<script setup lang="ts">
// @errors: 2614
import { data as posts } from "../src/posts.data";
// ...
</script>

<template>
  <!-- ... -->
</template>

I can confirm that the cut functionality in the example above does not currently work. For context, I'm using [email protected] and [email protected].

[antfu]

Sure, PR welcome :)

[Fro-Q]

After checking the source code, I noticed that twoslash-vue does not process the entire Vue SFC but only focuses on the <script> block. This is why // ---cut--- does not work outside of <script>, even when the regex matches. I agree that this design should remain unchanged.

Instead, I will explore whether Shiki can support a transformer to hide specific lines. See you there ;)