feat(twoslash-svelte): markup cutting

packages/twoslash-svelte/package.json

@@ -46,11 +46,13 @@
     "start": "esno src/index.ts"
   },
   "peerDependencies": {
+    "svelte": ">=5",
     "typescript": "*"
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "catalog:",
     "@volar/language-core": "catalog:",
+    "estree-walker": "catalog:",
     "svelte2tsx": "catalog:",
     "twoslash": "workspace:*",
     "twoslash-protocol": "workspace:*"

packages/twoslash-svelte/src/index.ts

@@ -4,8 +4,10 @@ import { createRequire } from 'node:module'
 import { decode } from '@jridgewell/sourcemap-codec'
 import { SourceMap } from '@volar/language-core'
 import { svelte2tsx } from 'svelte2tsx'
+import { parse } from 'svelte/compiler'
 import { createTwoslasher as createTwoSlasherBase, defaultCompilerOptions, defaultHandbookOptions, findFlagNotations, findQueryMarkers } from 'twoslash'
 import { createPositionConverter, removeCodeRanges, resolveNodePositions } from 'twoslash-protocol'
+import { findCutNotations } from 'twoslash/core'
 import ts from 'typescript'
 
 export interface CreateTwoslashSvelteOptions extends CreateTwoslashOptions {
@@ -78,6 +80,7 @@ export function createTwoslasher(createOptions: CreateTwoslashSvelteOptions = {}
     }
 
     const compiled = svelte2tsx(strippedCode)
+
     const map = generateSourceMap(strippedCode, compiled.code, compiled.map.mappings)
 
     function getLastGeneratedOffset(pos: number) {
@@ -146,16 +149,20 @@ export function createTwoslasher(createOptions: CreateTwoslashSvelteOptions = {}
       })
       .filter(value => value != null)
 
+    const ast = parse(strippedCode, { modern: true })
+
+    findCutNotations(code, sourceMeta, {
+      reCutBefore: /^<!--\s*---cut(-before)?---\s*-->$/,
+      reCutAfter: /^<!--\s*---cut-after---\s*-->$/,
+      reCutStart: /^<!--\s*---cut-start---\s*-->$/,
+      reCutEnd: /^<!--\s*---cut-end---\s*-->$/,
+    })
+
     const mappedRemovals = [
       ...sourceMeta.removals,
-      ...result.meta.removals.map((r) => {
-        const start = get(map.toSourceLocation(r[0]), 0)?.[0] ?? code.match(/(?<=<script[\s\S]*>\s)/)?.index
-        const end = get(map.toSourceLocation(r[1]), 0)?.[0]
-        if (start == null || end == null || start < 0 || end < 0 || start >= end) {
-          return undefined
-        }
-        return [start, end] as Range
-      }).filter(value => value != null),
+      ...result.meta.removals
+        .map(r => mapRemovalToSource(r, map, ast))
+        .filter(value => value != null),
     ]
 
     if (!options.handbookOptions?.keepNotations) {
@@ -275,3 +282,49 @@ function generateSourceMap(
   }
   return new SourceMap(mappings)
 }
+
+function mapRemovalToSource(
+  r: Range,
+  map: SourceMap,
+  ast: ReturnType<typeof parse>,
+): Range | undefined {
+  const instanceContent = hasRange(ast.instance?.content) ? ast.instance.content : undefined
+  const moduleContent = hasRange(ast.module?.content) ? ast.module.content : undefined
+
+  let start = get(map.toSourceLocation(r[0]), 0)?.[0]
+  let end = get(map.toSourceLocation(r[1]), 0)?.[0]
+
+  // Determine which script block this removal belongs to
+  const scriptContent = start != null
+    ? (instanceContent && start >= instanceContent.start && start <= instanceContent.end ? instanceContent : undefined)
+    ?? (moduleContent && start >= moduleContent.start && start <= moduleContent.end ? moduleContent : undefined)
+    : instanceContent ?? moduleContent
+
+  // Fall back to script boundaries for unmappable positions
+  start ??= scriptContent?.start
+  if (end == null && scriptContent != null && r[1] > scriptContent.end)
+    end = scriptContent.end
+
+  if (start == null || end == null || start < 0 || end < 0 || start >= end)
+    return undefined
+
+  // Clamp to script content boundaries to protect <script> tags
+  if (scriptContent) {
+    start = Math.max(start, scriptContent.start)
+    end = Math.min(end, scriptContent.end)
+  }
+
+  if (start >= end)
+    return undefined
+
+  return [start, end]
+}
+
+function hasRange(range: unknown): range is { start: number, end: number } {
+  return typeof range === 'object'
+    && range != null
+    && 'start' in range
+    && 'end' in range
+    && typeof range.start === 'number'
+    && typeof range.end === 'number'
+}

packages/twoslash-svelte/test/fixtures/completion.svelte → packages/twoslash-svelte/test/fixtures/script/completion.svelte

@@ -1,12 +1,10 @@
 <script>
     let count = $state(0);
     //           ^|
-
     function increment() {
         count++;
     }
 </script>
-
 <button onclick={increment}>
     Count is: {count}
 </button>

packages/twoslash-svelte/test/fixtures/script/cut-after.svelte

@@ -0,0 +1,10 @@
+<script>
+    let count = $state(0);
+    // ---cut-after---
+    function increment() {
+        count++;
+    }
+</script>
+<button onclick={increment}>
+    Count is: {count}
+</button>

packages/twoslash-svelte/test/fixtures/cut-around.svelte → packages/twoslash-svelte/test/fixtures/script/cut-before.svelte

@@ -1,13 +1,10 @@
 <script>
     let count = $state(0);
-
     // ---cut-before---
     function increment() {
         count++;
     }
-    // ---cut-after---
 </script>
-
 <button onclick={increment}>
     Count is: {count}
 </button>

packages/twoslash-svelte/test/fixtures/cut-in.svelte → packages/twoslash-svelte/test/fixtures/script/cut-region.svelte

@@ -1,13 +1,11 @@
 <script>
     let count = $state(0);
-
     // ---cut-start---
     function increment() {
         count++;
     }
     // ---cut-end---
 </script>
-
 <button onclick={increment}>
     Count is: {count}
 </button>

packages/twoslash-svelte/test/fixtures/script/cut.svelte

@@ -0,0 +1,10 @@
+<script>
+    let count = $state(0);
+    // ---cut---
+    function increment() {
+        count++;
+    }
+</script>
+<button onclick={increment}>
+    Count is: {count}
+</button>

packages/twoslash-svelte/test/fixtures/hover.svelte → packages/twoslash-svelte/test/fixtures/script/hover.svelte

@@ -1,11 +1,9 @@
 <script>
     let count = $state(0);
-
     function increment() {
         count++;
     }
 </script>
-
 <button onclick={increment}>
     Count is: {count}
 </button>

packages/twoslash-svelte/test/fixtures/query.svelte → packages/twoslash-svelte/test/fixtures/script/query.svelte

@@ -1,12 +1,10 @@
 <script>
     let count = $state(0);
     //           ^?
-
     function increment() {
         count++;
     }
 </script>
-
 <button onclick={increment}>
     Count is: {count}
 </button>

packages/twoslash-svelte/test/fixtures/script/throws/cut-region-missing-end.svelte

@@ -0,0 +1,10 @@
+<script>
+    let count = $state(0);
+    // ---cut-start---
+    function increment() {
+        count++;
+    }
+</script>
+<button onclick={increment}>
+    Count is: {count}
+</button>

packages/twoslash-svelte/test/fixtures/script/throws/cut-region-missing-start.svelte

@@ -0,0 +1,10 @@
+<script>
+    let count = $state(0);
+    function increment() {
+        count++;
+    }
+    // ---cut-end---
+</script>
+<button onclick={increment}>
+    Count is: {count}
+</button>

packages/twoslash-svelte/test/fixtures/template/cut-after.svelte

@@ -0,0 +1,10 @@
+<script>
+    let count = $state(0);
+    function increment() {
+        count++;
+    }
+</script>
+<!-- ---cut-after--- -->
+<button onclick={increment}>
+    Count is: {count}
+</button>

packages/twoslash-svelte/test/fixtures/template/cut-before.svelte

@@ -0,0 +1,10 @@
+<script>
+    let count = $state(0);
+    function increment() {
+        count++;
+    }
+</script>
+<!-- ---cut-before--- -->
+<button onclick={increment}>
+    Count is: {count}
+</button>

packages/twoslash-svelte/test/fixtures/template/cut-region.svelte

@@ -0,0 +1,11 @@
+<script>
+    let count = $state(0);
+    function increment() {
+        count++;
+    }
+</script>
+<!-- ---cut-start--- -->
+<button onclick={increment}>
+    Count is: {count}
+</button>
+<!-- ---cut-end--- -->

packages/twoslash-svelte/test/fixtures/template/cut.svelte

@@ -0,0 +1,10 @@
+<script>
+    let count = $state(0);
+    function increment() {
+        count++;
+    }
+</script>
+<!-- ---cut--- -->
+<button onclick={increment}>
+    Count is: {count}
+</button>

packages/twoslash-svelte/test/fixtures/template/throws/cut-region-missing-end.svelte

@@ -0,0 +1,10 @@
+<script>
+    let count = $state(0);
+    function increment() {
+        count++;
+    }
+</script>
+<!-- ---cut-start--- -->
+<button onclick={increment}>
+    Count is: {count}
+</button>

packages/twoslash-svelte/test/fixtures/template/throws/cut-region-missing-start.svelte

@@ -0,0 +1,10 @@
+<script>
+    let count = $state(0);
+    function increment() {
+        count++;
+    }
+</script>
+<button onclick={increment}>
+    Count is: {count}
+</button>
+<!-- ---cut-end--- -->