Skip to content

Commit 7765c5c

Browse files
Hugos68antfu
Hugos68
and
antfu
authored
feat: introduce twoslash-svelte (#57)
Co-authored-by: Anthony Fu <github@antfu.me>
1 parent b85ea15 commit 7765c5c

24 files changed

Lines changed: 1196 additions & 27 deletions

‎docs/.vitepress/config.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import antfu from '@antfu/eslint-config'
44
import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
55
import { bundledThemes } from 'shiki'
66
import { createTwoslasher as createTwoslasherESLint } from 'twoslash-eslint'
7+
import { createTwoslasher as createTwoslasherSvelte } from 'twoslash-svelte'
78
import { defineConfig } from 'vitepress'
89
import { version } from '../../package.json'
910
import vite from './vite.config'
@@ -24,6 +25,7 @@ const REFERENCES = [
2425

2526
const INTEGRATIONS = [
2627
{ text: 'Vue Language Support', link: '/packages/vue' },
28+
{ text: 'Svelte Language Support', link: '/packages/svelte' },
2729
{ text: 'ESLint TwoSlash', link: '/packages/eslint' },
2830
{ text: 'CDN Usage', link: '/packages/cdn' },
2931
] satisfies DefaultTheme.SidebarItem[]
@@ -39,7 +41,7 @@ export default defineConfig({
3941
title: 'Twoslash',
4042
description: 'Markup for TypeScript information in docs',
4143
markdown: {
42-
languages: ['vue'],
44+
languages: ['vue', 'svelte', 'json', 'js'],
4345
theme: {
4446
light: 'vitesse-light',
4547
dark: 'vitesse-dark',
@@ -64,6 +66,10 @@ export default defineConfig({
6466
}) as any,
6567
explicitTrigger: /\beslint-check\b/,
6668
}),
69+
transformerTwoslash({
70+
langs: ['svelte'],
71+
twoslasher: createTwoslasherSvelte(),
72+
}),
6773
{
6874
// Render custom themes with codeblocks
6975
name: 'twoslash:inline-theme',

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"fuse.js": "catalog:",
1515
"oxc-minify": "catalog:",
1616
"sass": "catalog:",
17+
"svelte": "catalog:",
1718
"unocss": "catalog:",
1819
"vitepress": "catalog:",
1920
"vue": "catalog:"

‎docs/packages/svelte.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Twoslash Svelte
2+
3+
This package added the support for Twoslash to handle Svelte files.
4+
5+
For example:
6+
7+
```svelte twoslash
8+
<script>
9+
import { onMount } from 'svelte'
10+
// ^?
11+
12+
// Reactive state.
13+
let count = $state(0)
14+
15+
// Functions that mutate state and trigger updates.
16+
function increment() {
17+
count++
18+
}
19+
20+
// Lifecycle hooks.
21+
onMount(() => {
22+
console.log(`The initial count is ${count}.`)
23+
})
24+
</script>
25+
26+
<button onclick={increment}>
27+
Count is: {count}
28+
</button>
29+
```
30+
31+
## Installation
32+
33+
::: code-group
34+
35+
```bash [npm]
36+
npm i -D twoslash-svelte svelte2tsx
37+
```
38+
```bash [pnpm]
39+
pnpm i -D twoslash-svelte svelte2tsx
40+
```
41+
```bash [yarn]
42+
yarn add -D twoslash-svelte svelte2tsx
43+
```
44+
```bash [bun]
45+
bun add -D twoslash-svelte svelte2tsx
46+
```
47+
48+
:::
49+
50+
::: info Required Types
51+
52+
`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'.`
53+
54+
:::
55+
56+
## Usage
57+
58+
```ts twoslash
59+
// @noErrors
60+
import { createTwoslasher } from 'twoslash' // [!code --]
61+
import { createTwoslasher } from 'twoslash-svelte' // [!code ++]
62+
63+
const code = `
64+
<script>
65+
const msg = 'Hello Svelte!'
66+
</script>
67+
68+
<div>
69+
<h1>{msg}</h1>
70+
</div>
71+
`
72+
73+
const twoslasher = createTwoslasher()
74+
const result = twoslasher(code, 'svelte') // [!code hl]
75+
```

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,13 @@
4444
"react": "catalog:",
4545
"shiki": "catalog:",
4646
"simple-git-hooks": "catalog:",
47+
"svelte": "catalog:",
4748
"tslib": "catalog:",
4849
"twoslash": "workspace:*",
4950
"twoslash-cdn": "workspace:*",
5051
"twoslash-eslint": "workspace:*",
5152
"twoslash-remote": "workspace:*",
53+
"twoslash-svelte": "workspace:*",
5254
"twoslash-vue": "workspace:*",
5355
"typescript": "catalog:",
5456
"unbuild": "catalog:",

‎packages/twoslash-svelte/LICENSE‎

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

‎packages/twoslash-svelte/README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# twoslash-svelte
2+
3+
[![npm version][npm-version-src]][npm-version-href]
4+
[![npm downloads][npm-downloads-src]][npm-downloads-href]
5+
6+
Extended Twoslash for Svelte support.
7+
8+
[📚 Documentation](https://twoslash.netlify.app/packages/svelte)
9+
10+
## License
11+
12+
[MIT](./LICENSE) License © 2024-PRESENT [Hugos68](https://github.com/Hugos68)
13+
14+
<!-- Badges -->
15+
16+
[npm-version-src]: https://img.shields.io/npm/v/twoslash-svelte?style=flat&colorA=161514&colorB=EAB836
17+
[npm-version-href]: https://npmjs.com/package/twoslash-svelte
18+
[npm-downloads-src]: https://img.shields.io/npm/dm/twoslash-svelte?style=flat&colorA=161514&colorB=E66041
19+
[npm-downloads-href]: https://npmjs.com/package/twoslash-svelte

‎packages/twoslash-svelte/build.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineBuildConfig } from 'unbuild'
2+
3+
export default defineBuildConfig({
4+
entries: [
5+
'src/index',
6+
],
7+
declaration: true,
8+
clean: true,
9+
rollup: {
10+
emitCJS: true,
11+
},
12+
})

‎packages/twoslash-svelte/package.json‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"name": "twoslash-svelte",
3+
"type": "module",
4+
"version": "0.3.8",
5+
"description": "Extended Twoslash for Svelte support",
6+
"author": "Hugo Korte <hugokorteapple@gmail.com>",
7+
"license": "MIT",
8+
"homepage": "https://github.com/twoslashes/twoslash#readme",
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/twoslashes/twoslash.git",
12+
"directory": "packages/twoslash-svelte"
13+
},
14+
"bugs": "https://github.com/twoslashes/twoslash/issues",
15+
"keywords": [
16+
"twoslash",
17+
"svelte",
18+
"shiki"
19+
],
20+
"sideEffects": false,
21+
"exports": {
22+
".": {
23+
"types": "./dist/index.d.ts",
24+
"import": "./dist/index.mjs",
25+
"require": "./dist/index.cjs"
26+
}
27+
},
28+
"main": "./dist/index.mjs",
29+
"module": "./dist/index.mjs",
30+
"types": "./dist/index.d.ts",
31+
"typesVersions": {
32+
"*": {
33+
"*": [
34+
"./dist/*",
35+
"./dist/index.d.ts"
36+
]
37+
}
38+
},
39+
"files": [
40+
"dist"
41+
],
42+
"scripts": {
43+
"build": "unbuild",
44+
"dev": "unbuild --stub",
45+
"prepublishOnly": "nr build",
46+
"start": "esno src/index.ts"
47+
},
48+
"peerDependencies": {
49+
"svelte2tsx": "*",
50+
"typescript": "*"
51+
},
52+
"dependencies": {
53+
"@jridgewell/sourcemap-codec": "catalog:",
54+
"@volar/language-core": "catalog:",
55+
"twoslash": "workspace:*",
56+
"twoslash-protocol": "workspace:*"
57+
},
58+
"devDependencies": {
59+
"@types/node": "catalog:"
60+
}
61+
}

0 commit comments

Comments
 (0)