Feat: twoslash-svelte

docs/.vitepress/config.ts

@@ -4,6 +4,7 @@ import antfu from '@antfu/eslint-config'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 import { bundledThemes } from 'shiki'
 import { createTwoslasher as createTwoslasherESLint } from 'twoslash-eslint'
+import { createTwoslasher as createTwoslasherSvelte } from 'twoslash-svelte'
 import { defineConfig } from 'vitepress'
 import { version } from '../../package.json'
 import vite from './vite.config'
@@ -24,6 +25,7 @@ const REFERENCES: DefaultTheme.NavItemWithLink[] = [
 
 const INTEGRATIONS: DefaultTheme.NavItemWithLink[] = [
   { text: 'Vue Language Support', link: '/packages/vue' },
+  { text: 'Svelte Language Support', link: '/packages/svelte' },
   { text: 'ESLint TwoSlash', link: '/packages/eslint' },
   { text: 'CDN Usage', link: '/packages/cdn' },
 ]
@@ -63,6 +65,10 @@ export default defineConfig({
         }) as any,
         explicitTrigger: /\beslint-check\b/,
       }),
+      transformerTwoslash({
+        langs: ['svelte'],
+        twoslasher: createTwoslasherSvelte(),
+      }),
       {
         // Render custom themes with codeblocks
         name: 'twoslash:inline-theme',

docs/package.json

@@ -13,6 +13,8 @@
     "floating-vue": "catalog:",
     "fuse.js": "catalog:",
     "sass": "catalog:",
+    "svelte": "catalog:",
+    "svelte2tsx": "catalog:",
     "unocss": "catalog:",
     "vitepress": "catalog:",
     "vue": "catalog:"

docs/packages/svelte.md

@@ -0,0 +1,75 @@
+# Twoslash Svelte
+
+This package added the support for Twoslash to handle Svelte files.
+
+For example:
+
+```svelte twoslash
+<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
+
+::: code-group
+
+```bash [npm]
+npm i -D twoslash-svelte svelte2tsx
+```
+```bash [pnpm]
+pnpm i -D twoslash-svelte svelte2tsx
+```
+```bash [yarn]
+yarn add -D twoslash-svelte svelte2tsx
+```
+```bash [bun]
+bun add -D twoslash-svelte svelte2tsx
+```
+
+:::
+
+::: info 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
+
+```ts twoslash
+// @noErrors
+import { createTwoslasher } from 'twoslash' // [!code --]
+import { createTwoslasher } from 'twoslash-svelte' // [!code ++]
+
+const code = `
+<script>
+  const msg = 'Hello Svelte!'
+</script>
+
+<div>
+<h1>{msg}</h1>
+</div>
+`
+
+const twoslasher = createTwoslasher()
+const result = twoslasher(code, 'svelte') // [!code hl]
+```

package.json

@@ -43,10 +43,13 @@
     "react": "catalog:",
     "shiki": "catalog:",
     "simple-git-hooks": "catalog:",
+    "svelte": "catalog:",
+    "svelte2tsx": "catalog:",
     "tslib": "catalog:",
     "twoslash": "workspace:*",
     "twoslash-cdn": "workspace:*",
     "twoslash-eslint": "workspace:*",
+    "twoslash-svelte": "workspace:*",
     "twoslash-vue": "workspace:*",
     "typescript": "catalog:",
     "unbuild": "catalog:",

packages/twoslash-svelte/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-PRESENT Hugo Korte <https://github.com/Hugos68>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/twoslash-svelte/README.md

@@ -0,0 +1,19 @@
+# twoslash-svelte
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+
+Extended Twoslash for Svelte support.
+
+[📚 Documentation](https://twoslash.netlify.app/packages/svelte)
+
+## License
+
+[MIT](./LICENSE) License © 2024-PRESENT [Hugos68](https://github.com/Hugos68)
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/twoslash-svelte?style=flat&colorA=161514&colorB=EAB836
+[npm-version-href]: https://npmjs.com/package/twoslash-svelte
+[npm-downloads-src]: https://img.shields.io/npm/dm/twoslash-svelte?style=flat&colorA=161514&colorB=E66041
+[npm-downloads-href]: https://npmjs.com/package/twoslash-svelte

packages/twoslash-svelte/build.config.ts

@@ -0,0 +1,12 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    'src/index',
+  ],
+  declaration: true,
+  clean: true,
+  rollup: {
+    emitCJS: true,
+  },
+})

packages/twoslash-svelte/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "twoslash-svelte",
+  "type": "module",
+  "version": "0.2.12",
+  "description": "Extended Twoslash for Svelte support",
+  "author": "Hugo Korte <[email protected]>",
+  "license": "MIT",
+  "homepage": "https://github.com/twoslashes/twoslash#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/twoslashes/twoslash.git",
+    "directory": "packages/twoslash-svelte"
+  },
+  "bugs": "https://github.com/twoslashes/twoslash/issues",
+  "keywords": [
+    "twoslash",
+    "svelte",
+    "shiki"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "prepublishOnly": "nr build",
+    "start": "esno src/index.ts"
+  },
+  "peerDependencies": {
+    "svelte2tsx": "*",
+    "typescript": "*"
+  },
+  "dependencies": {
+    "@jridgewell/sourcemap-codec": "catalog:",
+    "@volar/language-core": "catalog:",
+    "twoslash": "workspace:*",
+    "twoslash-protocol": "workspace:*"
+  }
+}