Skip to content

console.log()-like interactive inspector for Svelte 3

License

Notifications You must be signed in to change notification settings

trbrc/svelte-inspect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
AZ 09 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>

About

console.log()-like interactive inspector for Svelte 3

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published