├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── rollup.config.js
├── src
    ├── Inspector.svelte
    ├── index.js
    └── logo.png
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | > If you are using `vite-plugin-svelte`, use the `inspector` options instead:
 2 | > https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#inspector
 3 | 
 4 | ![logo](./src/logo.png)
 5 | 
 6 | # vite-plugin-svelte-inspector
 7 | 
 8 | Play with the [LIVE DEMO](https://stackblitz.com/edit/sveltejs-kit-template-default-gnpnjl).
 9 | 
10 | ## Installation
11 | 
12 | ```sh
13 | # pnpm
14 | pnpm install vite-plugin-svelte-inspector -D
15 | 
16 | # yarn
17 | yarn add vite-plugin-svelte-inspector -D
18 | 
19 | # npm
20 | npm install vite-plugin-svelte-inspector -D
21 | ```
22 | 
23 | ## Usage
24 | 
25 | ### Add it to your SvelteKit project
26 | 
27 | ```js
28 | // filename: svelte.config.js
29 | 
30 | // for vue2
31 | import Inspector from 'vite-plugin-svelte-inspector';
32 | 
33 | /** @type {import('@sveltejs/kit').Config} */
34 | const config = {
35 |   kit: {
36 |     // ...
37 |     vite: {
38 |       plugins: [Inspector()],
39 |     },
40 |   },
41 | };
42 | 
43 | export default config;
44 | ```
45 | 
46 | ### License
47 | 
48 | [MIT](/LICENSE)
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vite-plugin-svelte-inspector",
 3 |   "version": "0.2.1",
 4 |   "main": "dist/index.js",
 5 |   "files": [
 6 |     "dist"
 7 |   ],
 8 |   "license": "MIT",
 9 |   "scripts": {
10 |     "build": "rollup -c rollup.config.js"
11 |   },
12 |   "devDependencies": {
13 |     "rollup": "^2.70.2",
14 |     "rollup-plugin-svelte": "^7.1.0",
15 |     "svelte": "^3.47.0"
16 |   },
17 |   "peerDependencies": {
18 |     "svelte": "^3.44.0"
19 |   },
20 |   "type": "module"
21 | }
22 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | 
 3 | export default {
 4 |   input: 'src/index.js',
 5 |   output: {
 6 |     file: 'dist/index.js',
 7 |     format: 'esm',
 8 |   },
 9 |   plugins: [
10 |     svelte({ emitCss: false }),
11 |     {
12 |       transform(code, id) {
13 |         if (id.endsWith('.svelte')) {
14 |           return (
15 |             'export default `' +
16 |             code
17 |               .replace('export default ', 'const $ = ')
18 |               .replace(/\${/g, '\\${')
19 |               .replace(/`/g, '\\`') +
20 |             '`'
21 |           );
22 |         }
23 |         return code;
24 |       },
25 |     },
26 |   ],
27 | };
28 | 


--------------------------------------------------------------------------------
/src/Inspector.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { onMount } from 'svelte';
  3 |   export let enabled = true;
  4 |   let open;
  5 |   let x;
  6 |   let y;
  7 | 
  8 |   $: ({ file, line, column } = parse(open));
  9 | 
 10 |   onMount(() => {
 11 |     document.body.addEventListener('mouseover', mouseover);
 12 |     document.body.addEventListener('mousemove', mousemove);
 13 |     document.body.addEventListener('click', click);
 14 | 
 15 |     return () => {
 16 |       document.body.removeEventListener('mouseover', mouseover);
 17 |       document.body.removeEventListener('mousemove', mousemove);
 18 |       document.body.removeEventListener('click', click);
 19 |     };
 20 |   });
 21 | 
 22 |   function mousemove(event) {
 23 |     if (!enabled) return;
 24 |     x = event.x;
 25 |     y = event.y;
 26 |   }
 27 |   function mouseover(event) {
 28 |     if (!enabled) return;
 29 |     open = event.target.__svelte_meta;
 30 |   }
 31 |   function click() {
 32 |     if (!enabled || !file) return;
 33 |     fetch(`/__open-in-editor?file=${file}:${line}:${column}`);
 34 |   }
 35 |   function parse(open) {
 36 |     if (open) {
 37 |       const { loc: { file, line, column } } = open;
 38 |       return { file, line: line + 1, column: column + 1 };
 39 |     }
 40 |     return {};
 41 |   }
 42 | </script>
 43 | 
 44 | <div class="toggle" class:enabled on:click={() => (enabled = !enabled)}>
 45 |   <img
 46 |     src="https://github.com/tanhauhau/vite-plugin-svelte-inspector/blob/master/src/logo.png?raw=true"
 47 |     alt="logo"
 48 |   />
 49 | </div>
 50 | 
 51 | {#if enabled && file}
 52 |   <ul class="overlay" style:left="{x + 10}px" style:top="{y + 10}px">
 53 |     <li>file: {'<'}{file}{'>'}</li>
 54 |     <li>line: {line}</li>
 55 |     <li>column: {column}</li>
 56 |   </ul>
 57 | {/if}
 58 | 
 59 | <style>
 60 |   .overlay {
 61 |     position: fixed;
 62 |     border: 2px dashed #666;
 63 |     background-color: rgba(0, 0, 0, 0.8);
 64 |     color: #fff;
 65 |     padding: 10px;
 66 |     border-radius: 5px;
 67 |     text-align: left;
 68 |   }
 69 |   ul {
 70 |     list-style-type: none;
 71 |   }
 72 |   .toggle {
 73 |     border-radius: 50%;
 74 |     position: fixed;
 75 |     top: 10px;
 76 |     right: 10px;
 77 |     height: 50px;
 78 |     width: 50px;
 79 |     background: white;
 80 |     border: 2px solid red;
 81 |     display: flex;
 82 |     align-items: center;
 83 |     justify-content: center;
 84 |     cursor: pointer;
 85 |   }
 86 |   img {
 87 |     width: 80%;
 88 |     height: 80%;
 89 |     margin-top: 3px;
 90 |   }
 91 |   .toggle:not(.enabled) {
 92 |     border-color: gray;
 93 |     border-style: dashed;
 94 |     filter: grayscale(1);
 95 |   }
 96 |   .toggle:hover {
 97 |     background: #facece;
 98 |   }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Inspector from './Inspector.svelte';
 2 | 
 3 | export default function ({enabled=true}) {
 4 |   return {
 5 |     name: 'vite-plugin-svelte-inspector',
 6 |     enforce: 'pre',
 7 |     apply: 'serve',
 8 |     transform(code, id) {
 9 |       if (id.endsWith('/svelte-hmr/runtime/index.js')) {
10 |         // NOTE: can't find a place to inject this script, cheat by hitch along the hmr endpoint
11 |         return (
12 |           code +
13 |           '\n' +
14 |           Inspector +
15 |           `
16 |         new $({ target: document.body, props: { enabled: ${enabled} } });
17 |       `
18 |         );
19 |       }
20 |       return code;
21 |     },
22 |   };
23 | }
24 | 


--------------------------------------------------------------------------------
/src/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tanhauhau/vite-plugin-svelte-inspector/7580e9bd7660b960c1dd2202e01637e0de71f1e2/src/logo.png


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | 
 4 | 
 5 | estree-walker@^0.6.1:
 6 |   version "0.6.1"
 7 |   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
 8 |   integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
 9 | 
10 | fsevents@~2.3.2:
11 |   version "2.3.2"
12 |   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
13 |   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
14 | 
15 | require-relative@^0.8.7:
16 |   version "0.8.7"
17 |   resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
18 |   integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
19 | 
20 | rollup-plugin-svelte@^7.1.0:
21 |   version "7.1.0"
22 |   resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz#d45f2b92b1014be4eb46b55aa033fb9a9c65f04d"
23 |   integrity sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==
24 |   dependencies:
25 |     require-relative "^0.8.7"
26 |     rollup-pluginutils "^2.8.2"
27 | 
28 | rollup-pluginutils@^2.8.2:
29 |   version "2.8.2"
30 |   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
31 |   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
32 |   dependencies:
33 |     estree-walker "^0.6.1"
34 | 
35 | rollup@^2.70.2:
36 |   version "2.70.2"
37 |   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.2.tgz#808d206a8851628a065097b7ba2053bd83ba0c0d"
38 |   integrity sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==
39 |   optionalDependencies:
40 |     fsevents "~2.3.2"
41 | 
42 | svelte@^3.47.0:
43 |   version "3.47.0"
44 |   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.47.0.tgz#ba46fe4aea99fc650d6939c215cd4694f5325a19"
45 |   integrity sha512-4JaJp3HEoTCGARRWZQIZDUanhYv0iyoHikklVHVLH9xFE9db22g4TDv7CPeNA8HD1JgjXI1vlhR1JZvvhaTu2Q==
46 | 


--------------------------------------------------------------------------------