Svelte <Inspect {value}
/>
Getting Started
Install svelte-inspect-value
with your favorite package manager.
Importing Inspect
from svelte-inspect-value
makes three components available:
Inspect
, Inspect.Panel
, and Inspect.Values
Usage & Conditional Rendering
A common use case for a component like this is to only render it during development.
If you
are using SvelteKit, you can conditionally render Inspect using the dev
variable
exported from '$app/environment'
.
If you are not using SvelteKit or Vite, esm-env
is a good alternative
for checking conditional environment variables with different bundlers and runtimes.
<script>
import {dev} from '$app/environment'
import Inspect from 'svelte-inspect-value'
let value = $state({
id: undefined,
firstName: 'Bob',
lastName: 'Alice',
email: 'bob@alice.lol',
introduction: `The name is Alice.
Bob Alice.`,
birthDate: new Date(),
website: new URL('https://alicebob.website/?ref=abcdefg#about'),
age: -42,
emailVerified: true,
interests: ['radio', 'tv', 'internet', 'kayaks'],
})
</script>
{#if dev} <!-- only render during development -->
<Inspect {value} name="demo" />
{/if}
<!-- or use prop (some light weight initialization code will run) -->
<Inspect {value} renderIf={dev} />
Result:
Global Options
svelte-inspect-value
exports a utility function to set a "global" config for every instance
of the Inspect-components in or under the component where the function is called (it sets
context). Alternatively, you can use the InspectOptionsProvider
-component.
Passing a function returning a reactive object to the function will update the components if any
property of the object is changed.
You can try this now if you change any options in the configurator at the bottom of the
navigation-menu.
Options set with props, Inspect.Values.withOptions
or configured
will override any global options