@svelte-devtools/vite-plugin 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import type { Plugin } from 'vite';
+export interface SvelteDevtoolsOptions {
+    allowedHosts?: string[];
+}
+/**
+ * Vite plugin for Svelte DevTools.
+ *
+ * For SvelteKit projects, also add the handle hook to hooks.server.ts:
+ *
+ *   import { sequence } from '@sveltejs/kit/hooks';
+ *   import { svelteDevtoolsHandle } from '@svelte-devtools/kit';
+ *   export const handle = sequence(svelteDevtoolsHandle);
+ */
+export declare function svelteDevtools(options?: SvelteDevtoolsOptions): Plugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAUnC,MAAM,WAAW,qBAAqB;IACpC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAqBD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CA2G1E"}

package/dist/index.js

@@ -0,0 +1,136 @@
+import { existsSync, readFileSync } from 'fs';
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const overlayDir = resolve(__dirname, '..', '..', 'overlay', 'dist');
+const VIRTUAL_ID = 'virtual:svelte-devtools';
+const RESOLVED_ID = '\0virtual:svelte-devtools';
+const OVERLAY_VIRTUAL_ID = 'virtual:svelte-devtools-overlay';
+const OVERLAY_RESOLVED = '\0virtual:svelte-devtools-overlay';
+function normalizeHost(host) {
+    return host?.split(':')[0]?.toLowerCase() ?? '';
+}
+function isAllowedHost(host, allowedHosts) {
+    if (!allowedHosts?.length)
+        return true;
+    const hostname = normalizeHost(host);
+    const hostWithPort = host?.toLowerCase() ?? '';
+    return allowedHosts.some((allowedHost) => {
+        const allowed = allowedHost.toLowerCase();
+        return allowed === '*' || allowed === hostname || allowed === hostWithPort;
+    });
+}
+function isDevtoolsVirtualRequest(url) {
+    return Boolean(url?.includes(`/@id/${VIRTUAL_ID}`));
+}
+/**
+ * Vite plugin for Svelte DevTools.
+ *
+ * For SvelteKit projects, also add the handle hook to hooks.server.ts:
+ *
+ *   import { sequence } from '@sveltejs/kit/hooks';
+ *   import { svelteDevtoolsHandle } from '@svelte-devtools/kit';
+ *   export const handle = sequence(svelteDevtoolsHandle);
+ */
+export function svelteDevtools(options = {}) {
+    let isSvelteKit = false;
+    let base = '/';
+    let shouldInjectForCurrentRequest = true;
+    return {
+        name: '@svelte-devtools/vite-plugin',
+        apply: 'serve',
+        configResolved(config) {
+            base = config.base ?? '/';
+            isSvelteKit = config.plugins.some((p) => typeof p.name === 'string' && p.name.includes('sveltekit'));
+        },
+        configureServer(server) {
+            server.middlewares.use((req, res, next) => {
+                const allowed = isAllowedHost(req.headers.host, options.allowedHosts);
+                shouldInjectForCurrentRequest = allowed;
+                if (!allowed && isDevtoolsVirtualRequest(req.url)) {
+                    res.statusCode = 403;
+                    res.end('[svelte-devtools] host is not allowed');
+                    return;
+                }
+                next();
+            });
+            const overlayFile = resolve(overlayDir, 'overlay.js');
+            server.watcher.add(overlayFile);
+            server.watcher.on('change', (file) => {
+                if (file !== overlayFile)
+                    return;
+                const mod = server.moduleGraph.getModuleById(OVERLAY_RESOLVED);
+                if (mod)
+                    server.moduleGraph.invalidateModule(mod);
+                server.ws.send({ type: 'full-reload' });
+            });
+        },
+        resolveId(id) {
+            if (id === VIRTUAL_ID)
+                return RESOLVED_ID;
+            if (id === OVERLAY_VIRTUAL_ID)
+                return OVERLAY_RESOLVED;
+        },
+        load(id, opts) {
+            if (opts?.ssr)
+                return;
+            // ── Pre-built overlay Svelte 5 bundle ─────────────────────────────────
+            if (id === OVERLAY_RESOLVED) {
+                const p = resolve(overlayDir, 'overlay.js');
+                if (!existsSync(p)) {
+                    return 'console.warn("[svelte-devtools] overlay.js missing — run: npm run build:overlay")';
+                }
+                return readFileSync(p, 'utf-8');
+            }
+            // ── Bootstrap module ─────────────────────────────────────────────────
+            // Imports the overlay + wires up SvelteKit store subscriptions so the
+            // devtools panel stays in sync with navigation and page data.
+            if (id === RESOLVED_ID) {
+                const kitCode = isSvelteKit
+                    ? `
+            import('$app/stores').then(({ page, navigating }) => {
+              page.subscribe((v) => {
+                window.__sdt.page = v;
+                window.dispatchEvent(new CustomEvent('__sdt:update', { detail: { type: 'page' } }));
+              });
+              navigating.subscribe((v) => {
+                window.__sdt.navigating = v;
+                window.dispatchEvent(new CustomEvent('__sdt:update', { detail: { type: 'navigating' } }));
+              });
+            }).catch(() => {});
+          `
+                    : '';
+                return `
+          import '${OVERLAY_VIRTUAL_ID}';
+
+          window.__sdt = window.__sdt || {
+            page: null,
+            navigating: null,
+            components: [],
+          };
+
+          ${kitCode}
+        `;
+            }
+        },
+        // For non-SvelteKit Vite apps, transformIndexHtml works fine.
+        // SvelteKit bypasses this — use @svelte-devtools/kit handle instead.
+        transformIndexHtml: {
+            order: 'post',
+            handler() {
+                if (isSvelteKit)
+                    return []; // handled by the SvelteKit hook
+                if (!shouldInjectForCurrentRequest)
+                    return [];
+                return [
+                    {
+                        tag: 'script',
+                        attrs: { type: 'module', src: `${base}@id/${VIRTUAL_ID}` },
+                        injectTo: 'head-prepend',
+                    },
+                ];
+            },
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@svelte-devtools/vite-plugin",
+  "version": "0.1.0",
+  "description": "Vite plugin that adds a development overlay for inspecting Svelte 5 and SvelteKit apps",
+  "type": "module",
+  "keywords": ["svelte", "svelte5", "sveltekit", "devtools", "vite", "vite-plugin", "debug", "inspector"],
+  "author": "Chris Lentz",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chrislentz/svelte-devtools.git",
+    "directory": "packages/vite-plugin"
+  },
+  "homepage": "https://github.com/chrislentz/svelte-devtools#readme",
+  "bugs": "https://github.com/chrislentz/svelte-devtools/issues",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}