Twoslash Svelte

This package added the support for Twoslash to handle Svelte files.

For example:

<script>
    import { onMount } from 'svelte'

    // Reactive state.
    let count = $state(0)

    // Functions that mutate state and trigger updates.
    function increment() {
        count++
    }

    // Lifecycle hooks.
    onMount(() => {
        console.log(`The initial count is ${count}.`)
    })
</script>

<button onclick={increment}>
    Count is: {count}
</button>

<script>
    import { onMount } from 'svelte'
    //       ^?

    // Reactive state.
    let count = $state(0)

    // Functions that mutate state and trigger updates.
    function increment() {
        count++
    }

    // Lifecycle hooks.
    onMount(() => {
        console.log(`The initial count is ${count}.`)
    })
</script>

<button onclick={increment}>
    Count is: {count}
</button>

Installation

npm

npm i -D twoslash-svelte svelte2tsx

pnpm

pnpm i -D twoslash-svelte svelte2tsx

yarn

yarn add -D twoslash-svelte svelte2tsx

bun

bun add -D twoslash-svelte svelte2tsx

Required Types

twoslash-svelte requires svelte2tsx to be installed so that required declaration files are present during compilation of the Svelte code. Without svelte2tsx installed you might see errors like: Cannot find name 'svelteHTML'.

Usage

import { createTwoslasher } from 'twoslash'
import { createTwoslasher } from 'twoslash-svelte'

const code = `
<script>
  const msg = 'Hello Svelte!'
</script>

<div>
<h1>{msg}</h1>
</div>
`

const twoslasher = createTwoslasher()
const result = twoslasher(code, 'svelte')

// @noErrors
import { createTwoslasher } from 'twoslash'
import { createTwoslasher } from 'twoslash-svelte'

const code = `
<script>
  const msg = 'Hello Svelte!'
</script>

<div>
<h1>{msg}</h1>
</div>
`

const twoslasher = createTwoslasher()
const result = twoslasher(code, 'svelte')