vite-devtools-svelte 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +205 -0
- package/package.json +8 -8
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Yuichiro Yamashita
|
|
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.
|
package/README.md
ADDED
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
# vite-devtools-svelte
|
|
2
|
+
|
|
3
|
+
Svelte DevTools plugin for [Vite DevTools](https://github.com/nicepkg/vite-devtools). Provides 15 specialized panels for debugging, profiling, and inspecting Svelte/SvelteKit applications — all integrated directly into the Vite DevTools UI.
|
|
4
|
+
|
|
5
|
+
> **Status:** Early development. APIs may change.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- **Component Inspector** — View component hierarchy, props, state, and reactive values in real-time
|
|
10
|
+
- **Reactive Graph** — Visualize `$state`, `$derived`, and `$effect` dependencies as an interactive DAG
|
|
11
|
+
- **Render Profiler** — Track component render counts, render times, and identify bottlenecks
|
|
12
|
+
- **Route Viewer** — Explore SvelteKit file-based routing structure with dynamic parameters
|
|
13
|
+
- **Load Profiler** — Monitor SvelteKit `load` functions with waterfall visualization
|
|
14
|
+
- **State Timeline** — Record and replay state changes across the application
|
|
15
|
+
- **API Playground** — Test SvelteKit server endpoints (`+server.ts`) directly from DevTools
|
|
16
|
+
- **Error Dashboard** — Centralized view of compiler warnings and runtime errors
|
|
17
|
+
- **Code Inspector** — View compiled Svelte output with source mapping
|
|
18
|
+
- **Module Graph** — Visualize module dependencies and detect circular imports
|
|
19
|
+
- **OG Preview** — Preview Open Graph meta tags for SEO validation
|
|
20
|
+
- **Build Analysis** — Analyze build chunks and bundle composition
|
|
21
|
+
- **FPS Monitor** — Real-time frame rate monitoring with historical data
|
|
22
|
+
- **Asset Browser** — Browse and preview static assets with metadata
|
|
23
|
+
- **Overview** — Project summary with versions and dependency info
|
|
24
|
+
|
|
25
|
+
### Screenshots
|
|
26
|
+
|
|
27
|
+
<details>
|
|
28
|
+
<summary>Overview</summary>
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
</details>
|
|
33
|
+
|
|
34
|
+
<details>
|
|
35
|
+
<summary>Components</summary>
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
</details>
|
|
40
|
+
|
|
41
|
+
<details>
|
|
42
|
+
<summary>Routes</summary>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
</details>
|
|
47
|
+
|
|
48
|
+
<details>
|
|
49
|
+
<summary>Assets</summary>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
</details>
|
|
54
|
+
|
|
55
|
+
<details>
|
|
56
|
+
<summary>Render Profiler</summary>
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
</details>
|
|
61
|
+
|
|
62
|
+
<details>
|
|
63
|
+
<summary>Reactive Graph</summary>
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
</details>
|
|
68
|
+
|
|
69
|
+
<details>
|
|
70
|
+
<summary>FPS Monitor</summary>
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
</details>
|
|
75
|
+
|
|
76
|
+
<details>
|
|
77
|
+
<summary>Load Profiler</summary>
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
</details>
|
|
82
|
+
|
|
83
|
+
<details>
|
|
84
|
+
<summary>State Timeline</summary>
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
</details>
|
|
89
|
+
|
|
90
|
+
<details>
|
|
91
|
+
<summary>API Playground</summary>
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
</details>
|
|
96
|
+
|
|
97
|
+
<details>
|
|
98
|
+
<summary>Errors & Warnings</summary>
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
</details>
|
|
103
|
+
|
|
104
|
+
<details>
|
|
105
|
+
<summary>Code Inspector</summary>
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
</details>
|
|
111
|
+
|
|
112
|
+
<details>
|
|
113
|
+
<summary>Module Graph</summary>
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
</details>
|
|
118
|
+
|
|
119
|
+
<details>
|
|
120
|
+
<summary>OG Preview</summary>
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
</details>
|
|
125
|
+
|
|
126
|
+
<details>
|
|
127
|
+
<summary>Build Analysis</summary>
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
</details>
|
|
132
|
+
|
|
133
|
+
## Requirements
|
|
134
|
+
|
|
135
|
+
- **Vite** >= 8.0.0
|
|
136
|
+
- **Svelte** 5 (runes mode)
|
|
137
|
+
- **SvelteKit** (recommended, but not required for basic features)
|
|
138
|
+
|
|
139
|
+
## Installation
|
|
140
|
+
|
|
141
|
+
```bash
|
|
142
|
+
npm install -D vite-devtools-svelte
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Setup
|
|
146
|
+
|
|
147
|
+
Add the plugin to your `vite.config.ts`. **It must come before `sveltekit()`** so that the transforms run before the Svelte compiler.
|
|
148
|
+
|
|
149
|
+
```ts
|
|
150
|
+
// vite.config.ts
|
|
151
|
+
import { svelteDevtools } from 'vite-devtools-svelte'
|
|
152
|
+
import { sveltekit } from '@sveltejs/kit/vite'
|
|
153
|
+
import { defineConfig } from 'vite'
|
|
154
|
+
|
|
155
|
+
export default defineConfig({
|
|
156
|
+
plugins: [svelteDevtools(), sveltekit()],
|
|
157
|
+
})
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
Then start your dev server as usual:
|
|
161
|
+
|
|
162
|
+
```bash
|
|
163
|
+
npm run dev
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
The Svelte DevTools panels will appear inside the Vite DevTools UI.
|
|
167
|
+
|
|
168
|
+
## Options
|
|
169
|
+
|
|
170
|
+
```ts
|
|
171
|
+
svelteDevtools({
|
|
172
|
+
// Enable component lifecycle tracking (default: true)
|
|
173
|
+
componentTracking: true,
|
|
174
|
+
})
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
## How It Works
|
|
178
|
+
|
|
179
|
+
The plugin uses a **virtual module architecture** instead of fragile regex transforms:
|
|
180
|
+
|
|
181
|
+
1. **Runtime wrapper** — Intercepts `svelte/internal/client` to track component lifecycle and reactive signals (`$state`, `$derived`, `$effect`)
|
|
182
|
+
2. **HMR channel** — Streams runtime data (component tree, render profiles, reactive graph) from the browser to the dev server via WebSocket
|
|
183
|
+
3. **Static analyzers** — Extract routes, component relations, assets, and project metadata from the filesystem
|
|
184
|
+
4. **Dual transport RPC** — DevTools Kit RPC with HTTP fallback for compatibility
|
|
185
|
+
|
|
186
|
+
The plugin is **development-only** — it adds zero overhead to production builds.
|
|
187
|
+
|
|
188
|
+
## Security model
|
|
189
|
+
|
|
190
|
+
The DevTools backend exposes a small set of dev-only HTTP endpoints (`/__svelte-devtools/rpc`, `/__svelte-devtools/asset`) to drive the panel UI. Some of those endpoints can read files from disk or open them in your editor, so we treat them as authenticated even though the dev server is normally only reachable from `localhost`.
|
|
191
|
+
|
|
192
|
+
- **Per-process random token.** On every dev-server start the plugin generates a fresh UUID and injects it into the DevTools UI HTML as a `<meta>` tag. The HTTP fallback RPC and the asset middleware require that token in the `x-svelte-devtools-token` header, plus a same-origin `Origin`/`Referer`. Cross-origin requests, requests with the wrong token, and requests without `Content-Type: application/json` are rejected with `403` / `415`. Bodies above 1 MB are rejected with `413`.
|
|
193
|
+
- **Path sandbox.** `inspect-file`, `open-in-editor`, and `open-reactive-in-editor` resolve their input through `fs.realpath()` and refuse anything outside the project root, so a hostile RPC caller cannot read `/etc/passwd` or your `~/.ssh/` files even if they get past the token check. Symlinks inside the project are followed normally.
|
|
194
|
+
- **SSRF defenses.** Outbound fetches from `send-api-request` and the OG-preview RPC block `127.0.0.0/8` / `10.0.0.0/8` / `172.16.0.0/12` / `192.168.0.0/16` / `169.254.0.0/16` / IPv6 loopback / `localhost` / `*.local` / `*.internal`.
|
|
195
|
+
- **Dev-only by construction.** Both the runtime virtual module and the `svelte/internal/client` wrapper are gated on `config.command === 'serve'` and never resolve during a production build, so none of this surface ships to end users.
|
|
196
|
+
|
|
197
|
+
If you bind your dev server to `0.0.0.0` (e.g. `vite --host`), the same-origin check still blocks LAN browsers from invoking RPC, but anyone on the LAN can still see the panel UI itself. Treat that as you would any unauthenticated dev tool: don't run it on networks you don't trust.
|
|
198
|
+
|
|
199
|
+
## Contributing
|
|
200
|
+
|
|
201
|
+
Contributions are welcome! Please see the [repository](https://github.com/baseballyama/vite-devtools-svelte) for development setup and to open issues or pull requests.
|
|
202
|
+
|
|
203
|
+
## License
|
|
204
|
+
|
|
205
|
+
[MIT](https://github.com/baseballyama/vite-devtools-svelte/blob/main/LICENSE) © Yuichiro Yamashita
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vite-devtools-svelte",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Svelte DevTools plugin for Vite DevTools",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Yuichiro Yamashita",
|
|
@@ -40,12 +40,6 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"scripts": {
|
|
44
|
-
"build": "vite build",
|
|
45
|
-
"dev": "vite build --watch",
|
|
46
|
-
"test": "vitest run",
|
|
47
|
-
"test:watch": "vitest"
|
|
48
|
-
},
|
|
49
43
|
"dependencies": {
|
|
50
44
|
"@vitejs/devtools-kit": "^0.1.21"
|
|
51
45
|
},
|
|
@@ -58,5 +52,11 @@
|
|
|
58
52
|
},
|
|
59
53
|
"peerDependencies": {
|
|
60
54
|
"vite": "^8.0.0"
|
|
55
|
+
},
|
|
56
|
+
"scripts": {
|
|
57
|
+
"build": "vite build",
|
|
58
|
+
"dev": "vite build --watch",
|
|
59
|
+
"test": "vitest run",
|
|
60
|
+
"test:watch": "vitest"
|
|
61
61
|
}
|
|
62
|
-
}
|
|
62
|
+
}
|