DOCSEARCHbyAlgolia
Submit Docs

svelte-inspect-value

website·Indexed 32 days ago

https://inspect.eirik.space

A Svelte component and utility for inspecting values, featuring a themeable interface with CSS variables, a Theme Editor, and a global panel via the addToPanel function. Documentation includes a detailed changelog from v0.1.3 to v0.11.3.

Tokens
51.4K
Snippets
246
Records
496
Agent score
57%

What's inside svelte-inspect-value

  1. Overview of svelte-inspect-value

    svelte-inspect-value provides a collection of "JSON tree"-like value inspector components for Svelte. It serves as a developer utility to provide a live preview of application state, such as API data, form values, and promise states during development.

  2. Use Inspect.Panel to create a fixed-position debug wrapper

    Inspect.Panel is a fixed-position wrapper for the Inspect component. It supports resizing, repositioning, and customization. It accepts all props available to Inspect, plus additional panel-specific properties. It can also render children, allowing developers to embed custom debugging tools or information within the panel.

  3. Understand Svelte Inspect theming with Base16

    Svelte Inspect Value uses the base16-framework for its theming system. This means themes are defined using a set of 16 colors. Most existing base16 color schemes are compatible with Svelte Inspect. Note that while --base04 and --base0F are defined and available for use in custom components, they are not utilized by any of the default themes.

  4. Use keyboard shortcuts for Inspect component navigation

    Value-nodes are focusable and can be controlled via keyboard:

    • ↑ / ↓: Focus previous/next nodes
    • → / ←: Expand/collapse nodes or jump in/out of a scope
    • Enter: Expand a node and focus its first child
    • Ctrl/Cmd + F: Focus the search bar
    • Ctrl/Cmd + E: Expand all top-level nodes
    • Ctrl/Cmd + C: Collapse all top-level nodes
    • While a node is focused, typing any text will focus the next visible node with matching text.

  5. Control Inspect keyboard shortcuts

    Value-nodes are focusable and can be controlled via keyboard:

    • ↑ / ↓: Focus previous/next nodes.
    • → / ←: Expand/collapse nodes or jump in/out of an expandable scope.
    • Enter: Expand a node and focus its first child.
    • Ctrl/Cmd + F: Focus the search bar.
    • Ctrl/Cmd + E: Expand all top-level nodes.
    • Ctrl/Cmd + C: Collapse all top-level nodes.
    • Type to Focus: While a node is focused, typing any text will focus the next visible node with matching text.

  6. Install svelte-inspect-value

    Install the svelte-inspect-value package using your preferred package manager.
    npm install svelte-inspect-value
# or
pnpm add svelte-inspect-value
# or
bun add svelte-inspect-value
# or
yarn add svelte-inspect-value

  7. Use keyboard shortcuts for svelte-inspect-value navigation

    Value-nodes are focusable and can be controlled using the following keyboard shortcuts:

    • ↑ / ↓: Focus previous/next nodes.
    • → / ←: Expand/collapse nodes or jump in/out of an expandable scope.
    • Enter: Expand a node and focus its first child.
    • Ctrl/Cmd + F: Focus the search bar.
    • Ctrl/Cmd + E: Expand all top-level nodes.
    • Ctrl/Cmd + C: Collapse all top-level nodes.

    While a node is focused, typing any character will focus the next visible node with matching text.

  8. Use keyboard shortcuts for Inspect component navigation

    v0-8-0

    Value-nodes are focusable and can be controlled via the following keyboard shortcuts:

    • ↑ / ↓: Focus previous/next nodes
    • → / ←: Expand/collapse nodes or jump in/out of an expandable scope
    • Enter: Expand a node and focus its first child
    • Ctrl/Cmd + F: Focus the search bar
    • Ctrl/Cmd + E: Expand all top-level nodes
    • Ctrl/Cmd + C: Collapse all top-level nodes
    • While a node is focused, typing any text will focus the next visible node with matching text.

  9. Use chainable inline configuration with InlineConfig

    The InlineConfig pattern allows for chainable inline configuration of components within a template. By chaining configuration properties, you can override global options and options previously set via withOptions. The configuration chain is terminated by the .Ok property, which returns the final configurable component and accepts the component's data props.
    <script>
  import Inspect from 'svelte-inspect-value'
  import data from './data.js'
</script>

<!-- Chain configuration properties and terminate with .Ok to pass data -->
<Inspect.Values.Expand0.Config.Borderless.DoubleQuotes.DarkTheme.Ok {data} />

  10. Navigate Inspect components using keyboard shortcuts

    Value-nodes are focusable and can be controlled via the following keyboard shortcuts:

    • ↑ / ↓: Focus previous/next nodes.
    • → / ←: Expand/collapse nodes or jump in/out of an expandable scope.
    • Enter: Expand a node and focus its first child.
    • Ctrl/Cmd + F: Focus the search bar.
    • Ctrl/Cmd + E: Expand all top-level nodes.
    • Ctrl/Cmd + C: Collapse all top-level nodes.
    • While a node is focused, typing any text will focus the next visible node matching that text.

  11. Narrow search results using prefixes and quotes

    Refine search results by using specific prefixes to target different parts of the data structure. To require an exact match for a term, wrap it in double quotes.
    value:"1234"  // Search for the exact value "1234"
type:number     // Search for values of type number
key:email       // Search within the keys of values
path:user.name  // Search within the path to a value

  12. Navigate Inspect nodes using the keyboard

    Every node, row, or line in Inspect is focusable. Use the Tab key in combination with the following shortcuts to navigate the tree. Keyboard navigation can be disabled by setting the disableKeyNav option or prop to true.

    KeyAction
    ↑Focus previous node
    ↓Focus next node
    EndFocus last node
    HomeFocus first node
    EnterExpand node and focus first child
    SpaceExpand / collapse node
    →If collapsed: expand node; If expanded: focus previously focused or first child node; Non-expandable: focus next node
    ←If collapsed: focus parent or previous node; If expanded: collapse node; Non-expandable: focus previous node