-
-
Notifications
You must be signed in to change notification settings - Fork 110
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: move inspector to separate package (#646)
Co-authored-by: dominikg <[email protected]>
- Loading branch information
Showing
22 changed files
with
392 additions
and
211 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@sveltejs/vite-plugin-svelte': minor | ||
| '@sveltejs/vite-plugin-svelte-inspector': patch | ||
| --- | ||
|
|
||
| Refactor Svelte inspector as a separate package |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| # Inspector | ||
|
|
||
| `@sveltejs/vite-plugin-svelte-inspector` is a Vite plugin that adds a Svelte inspector in the browser. It shows the file location where the element under cursor is defined and you can click to quickly open your code editor at this location. | ||
|
|
||
| Note that `@sveltejs/vite-plugin-svelte` needs to be installed as a peer dependency as the inspector brings in Svelte components to be compiled. | ||
|
|
||
| ## Setup | ||
|
|
||
| ### with Svelte config | ||
|
|
||
| ```js | ||
| // svelte.config.js | ||
| export default { | ||
| vitePlugin: { | ||
| // set to true for defaults or customize with object | ||
| inspector: { | ||
| toggleKeyCombo: 'meta-shift', | ||
| showToggleButton: 'always', | ||
| toggleButtonPos: 'bottom-right' | ||
| } | ||
| } | ||
| }; | ||
| ``` | ||
|
|
||
| ### with environment variables | ||
|
|
||
| Svelte Inspector toggle keys and other options are personal preferences. As such it isn't always convenient to define them in a shared svelte config file. | ||
| To allow you to use your own setup, svelte inspector can be configured via environment variables, both from shell and dotenv files. | ||
|
|
||
| ```shell | ||
| # just keycombo, unquoted string | ||
| SVELTE_INSPECTOR_TOGGLE=control-shift | ||
|
|
||
| # options object as json | ||
| SVELTE_INSPECTOR_OPTIONS='{"holdMode": false, "toggleButtonPos": "bottom-left"}' | ||
|
|
||
| # disable completely | ||
| SVELTE_INSPECTOR_OPTIONS=false | ||
|
|
||
| # force default options | ||
| SVELTE_INSPECTOR_OPTIONS=true | ||
| ``` | ||
|
|
||
| > Inspector options set on the environment take precedence over values set in svelte config and automatically enable svelte inspector during dev. | ||
| ## Plugin options | ||
|
|
||
| ### toggleKeyCombo | ||
|
|
||
| - **Type:** `string` | ||
| - **Default:** `'meta-shift'` on mac, `'control-shift'` on other os | ||
|
|
||
| Define a key combo to toggle inspector. | ||
|
|
||
| The value is recommended to be any number of modifiers (e.g. `control`, `shift`, `alt`, `meta`) followed by zero or one regular key, separated by `-`. This helps avoid conflicts or accidentally typing into inputs. Note that some keys have native behavior (e.g. `alt-s` opens history menu on firefox). | ||
|
|
||
| Examples: `control-shift`, `control-o`, `control-alt-s`, `meta-x`, `control-meta`. | ||
|
|
||
| ### navKeys | ||
|
|
||
| - **Type:** `{ parent: string; child: string; next: string; prev: string }` | ||
| - **Default:** `{ parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' }` | ||
|
|
||
| Define keys to select elements with via keyboard. This improves accessibility and helps selecting elements that do not have a hoverable surface area due to tight wrapping. | ||
|
|
||
| - `parent`: select closest parent | ||
| - `child`: select first child (or grandchild) | ||
| - `next`: next sibling (or parent if no next sibling exists) | ||
| - `prev`: previous sibling (or parent if no prev sibling exists) | ||
|
|
||
| ### openKey | ||
|
|
||
| - **Type:** `string` | ||
| - **Default:** `'Enter'` | ||
|
|
||
| Define key to open the editor for the currently selected dom node. | ||
|
|
||
| ### holdMode | ||
|
|
||
| - **Type:** `boolean` | ||
| - **Default:** `true` | ||
|
|
||
| Inspector will only open when the `toggleKeyCombo` is held down, and close when released. | ||
|
|
||
| ### showToggleButton | ||
|
|
||
| - **Type:** `'always' | 'active' | 'never'` | ||
| - **Default:** `'active'` | ||
|
|
||
| When to show the toggle button. The toggle button allows you to click on-screen to enable/disable the inspector, rather than using the `toggleKeyCombo`. | ||
|
|
||
| - `'always'`: always show the toggle button | ||
| - `'active'`: show the toggle button when the inspector is active | ||
| - `'never'`: never show the toggle button | ||
|
|
||
| ### toggleButtonPos | ||
|
|
||
| - **Type:** `'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'` | ||
| - **Default:** `'top-right'` | ||
|
|
||
| Where to display the toggle button. | ||
|
|
||
| ### customStyles | ||
|
|
||
| - **Type:** `boolean` | ||
| - **Default:** `true` | ||
|
|
||
| Inject custom styles when inspector is active. This is useful if you want to customize the inspector styles to match your app. | ||
|
|
||
| When the inspector is active, the `svelte-inspector-enabled` class is added to the `body` element, and the `svelte-inspector-active-target` class is added to the current active target (e.g. via hover or keyboard). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| MIT License | ||
|
|
||
| Copyright (c) 2021 [these people](https://github.com/sveltejs/vite-plugin-svelte/graphs/contributors) | ||
|
|
||
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| # @sveltejs/vite-plugin-svelte-inspector | ||
|
|
||
| A [Svelte](https://svelte.dev) inspector plugin for [Vite](https://vitejs.dev). | ||
|
|
||
| ## Usage | ||
|
|
||
| ```js | ||
| // vite.config.js | ||
| import { defineConfig } from 'vite'; | ||
| import { svelte } from '@sveltejs/vite-plugin-svelte'; | ||
| import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector'; | ||
|
|
||
| export default defineConfig({ | ||
| plugins: [ | ||
| // the svelte plugin is required to work | ||
| svelte(), | ||
| svelteInspector({ | ||
| /* plugin options */ | ||
| }) | ||
| ] | ||
| }); | ||
| ``` | ||
|
|
||
| ## License | ||
|
|
||
| [MIT](./LICENSE) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| { | ||
| "name": "@sveltejs/vite-plugin-svelte-inspector", | ||
| "version": "1.0.0", | ||
| "license": "MIT", | ||
| "author": "dominikg", | ||
| "files": [ | ||
| "src" | ||
| ], | ||
| "type": "module", | ||
| "types": "src/index.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "types": "./src/index.d.ts", | ||
| "import": "./src/index.js" | ||
| } | ||
| }, | ||
| "engines": { | ||
| "node": "^14.18.0 || >= 16" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/sveltejs/vite-plugin-svelte.git", | ||
| "directory": "packages/vite-plugin-svelte-inspector" | ||
| }, | ||
| "keywords": [ | ||
| "vite-plugin", | ||
| "vite plugin", | ||
| "vite", | ||
| "svelte" | ||
| ], | ||
| "bugs": { | ||
| "url": "https://github.com/sveltejs/vite-plugin-svelte/issues" | ||
| }, | ||
| "homepage": "https://github.com/sveltejs/vite-plugin-svelte#readme", | ||
| "dependencies": { | ||
| "debug": "^4.3.4" | ||
| }, | ||
| "peerDependencies": { | ||
| "@sveltejs/vite-plugin-svelte": "^2.2.0", | ||
| "svelte": "^3.54.0", | ||
| "vite": "^4.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/debug": "^4.1.7", | ||
| "svelte": "^3.59.1" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import _debug from 'debug'; | ||
|
|
||
| export const debug = _debug('vite-plugin-svelte-inspector'); |
Oops, something went wrong.