npm is now a part of GitHub
❤npm promotes metadefinitions

npm

Sign UpSign In
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

svelte-inspect

0.1.2 • Public • Published

Svelte Inspect

Live & interactive object inspector for Svelte, inspired by DevTools.

npm install --save svelte-inspect

Try the example in the svelte.dev REPL. Use mouse and keyboard to inspect the todos.

<script>
  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';
</script> 
 
<!-- …and add an inspector anywhere on your page -->
<Inspect {todos} />
 
<Todos bind:todos={todos} />

Types

See REPL demo of most of the types. 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.

<script>
  import Inspect from 'svelte-inspect';
</script> 
 
<Inspect value={'foo'} {value2} {...etc} />

Inspect.Value

Inspect a single value, without showing the name of the prop. Also takes an optional depth directly as a prop.

<script>
  import Inspect from 'svelte-inspect';
 
  /* Or as a named import:
  import {Value} from 'svelte-inspect';
  */
</script> 
 
<Inspect.Value value={'foo'} depth={2} />

Inspect.Inverted

Inspector with color palette suitable for dark backgrounds.

<script>
  import Inspect from 'svelte-inspect';
 
  /* Or as a named import:
  import {Inverted} from 'svelte-inspect';
  */
</script> 
 
<Inspect.Inverted value={'foo'} {value2} {...etc} />

Inspect[0-10]

Inspectors pre-configured with {depth: 0-10}.

<script>
  import Inspect from 'svelte-inspect';
</script> 
 
<Inspect[2] {document} />

Inspect.configure(configuration)

Create an inspect component with custom configuration.

<script context="module">
  import Inspect from 'svelte-inspect';
  const CustomInspect = Inspect.configure({/* configuration */});
 
  /* Or as a named import:
  import {configure} from 'svelte-inspect';
  const CustomInspect = configure({/* configuration */});
  */
</script> 
 
<CustomInspect value={'foo'} />

Note the use of 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.

<script context="module">
  import Inspect from 'svelte-inspect';
  const CustomInspect = Inspect.configure({depth: 2});
  const object = {
    foo: {
      array: [1, 2, 3]
    }
  };
</script> 
 
<!-- 2 levels deep – will show `foo` and `array` but not `[1, 2, 3]` -->
<CustomInspect {object} />

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)

<script context="module">
  import Inspect from 'svelte-inspect';
  const CustomInspect = Inspect.configure({
    palette: {
      selection: 'hotpink',
      blue: 'dodgerblue'
    }
  });
</script> 

Keywords

Install

npm i svelte-inspect

DownloadsWeekly Downloads

249

Version

0.1.2

License

MIT

Unpacked Size

42.6 kB

Total Files

34

Homepage

github.com/trbrc/svelte-inspect

Repository

Gitgithub.com/trbrc/svelte-inspect

Last publish

Collaborators

  • avatar
Try on RunKit
Report a vulnerability