Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trbrc/svelte-inspect
console.log()-like interactive inspector for Svelte 3
https://github.com/trbrc/svelte-inspect
svelte svelte-components
Last synced: about 2 months ago
JSON representation
console.log()-like interactive inspector for Svelte 3
- Host: GitHub
- URL: https://github.com/trbrc/svelte-inspect
- Owner: trbrc
- License: mit
- Created: 2019-06-02T09:35:31.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-01-20T17:14:12.000Z (over 2 years ago)
- Last Synced: 2024-07-06T01:11:18.074Z (3 months ago)
- Topics: svelte, svelte-components
- Language: Svelte
- Homepage:
- Size: 58.6 KB
- Stars: 35
- Watchers: 5
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Inspect
Live & interactive object inspector for [Svelte](https://svelte.dev), inspired by DevTools.
```console
npm install --save svelte-inspect
```
Try the example in the [svelte.dev REPL](https://svelte.dev/repl/eb3b3ae5639544d78d7363e126b29896). Use mouse and keyboard to inspect the todos.
```html
import Todos from './Todos.svelte';
// You have some data you want to inspect
let todos = [
{done: false, text: 'Import svelte-inspect'},
{done: false, text: 'Pass any number of values to it'},
{done: false, text: 'See them update live'}
];
// Simply import svelte-inspect…
import Inspect from 'svelte-inspect';
```
## Types
See [REPL demo of most of the types](https://svelte.dev/repl/06f3a93da3454c6982aa5a38c541a5b0). These types have special formatting:
- Arrays (including TypedArrays)
- Objects
- Functions (including async functions)
- Classes
- Map and Set
- RegExps
- Dates
- Booleans
- undefined and null
- Numbers (including BigInt)
- Strings
- Symbols
- Errors
- HTML elements
There's support for enumerable and non-enumerable properties, symbol keys, `__proto__`, and getters (click to evaluate). It does not yet have any special support for e.g. iterators, promises.
## Keyboard navigation
You can use your keyboard to move around in the object hierarchy.
Keys | | Action
:--- | :--- | :---
A…Z 0…9 | Type anything | Jump using fuzzy matching
⇥ | Tab | Focus next
⇧⇥ | Shift + Tab | Focus previous
⯇ | Left | Close or step out
⯈ | Right | Open or step in
⯅ | Up | Focus previous
⯆ | Down | Focus next
| Space | Toggle
↵ | Enter | Open & step in
esc | Escape | Step out
## API
### `Inspect`
Create one inspector for every value passed in as a prop, with default colors.
```html
import Inspect from 'svelte-inspect';
```
### `Inspect.Value`
Inspect a single `value`, without showing the name of the prop. Also takes an optional `depth` directly as a prop.
```html
import Inspect from 'svelte-inspect';
/* Or as a named import:
import {Value} from 'svelte-inspect';
*/
```
### `Inspect.Inverted`
Inspector with color palette suitable for dark backgrounds.
```html
import Inspect from 'svelte-inspect';
/* Or as a named import:
import {Inverted} from 'svelte-inspect';
*/
```
### `Inspect[0-10]`
Inspectors pre-configured with `{depth: 0-10}`.
```html
import Inspect from 'svelte-inspect';
```
### `Inspect.configure(configuration)`
Create an inspect component with custom configuration.
```html
import Inspect from 'svelte-inspect';
const CustomInspect = Inspect.configure({/* configuration */});
/* Or as a named import:
import {configure} from 'svelte-inspect';
const CustomInspect = configure({/* configuration */});
*/
```
Note the use of [`context="module"`](https://svelte.dev/docs#script_context_module), which is required for the Svelte compiler to understand that `CustomInspector` can be used in the template.
The config is WIP. There are currently two options:
#### `{depth: number}`
Set how many levels of the object hierarchy should start in the open state. Defaults to `1`.
```html
import Inspect from 'svelte-inspect';
const CustomInspect = Inspect.configure({depth: 2});
const object = {
foo: {
array: [1, 2, 3]
}
};
```
Non-enumerable properties will not be opened.
#### `{palette: {...colors}}`
Create a component with a customized color palette. Values are any valid CSS color, keys are `red`, `blue`, `green`, `purple`, `orange`, `yellow`, `brown`, `pink`, `gray`, `black`, `white` and `selection` (note that not all of these colors are currently used).
*(work in progress; expect to change)*
```html
import Inspect from 'svelte-inspect';
const CustomInspect = Inspect.configure({
palette: {
selection: 'hotpink',
blue: 'dodgerblue'
}
});
```