Provides a simple to use, quick a dirty (well, just plain ugly) panel showing whatever data you wish to temporarily view whilst you are developing your app.
Sure you can do this with console.log({object})
or add breakpoints while debugging...
...but sometimes you just want to see how a value changes over time while using your app without chucking it into the view with why won't my button toggle: {variable}
, or perhaps you forgot what shape the data is in from that API call or store variable.
Displays an unobtrusive toggle-able window, with one or multiple variables of most kinds of data:
Manually expand/contract nested objects and arrays, or show all expanded, and hover to highlight elements of the same level.
npm install svelte-object-explorer --save-dev
Include svelte-object-explorer in the script section of any svelte file, but usually works best in your top level component so it's not hidden by other elements.
// App.svelte
<script>
import SvelteObjectExplorer from 'svelte-object-explorer'
// example value watching 2 properties
let html = document.body; // can be any Node
let staticObject1 = { test1: "test1" }
let value = { html, staticObject1 }
</script>
<SvelteObjectExplorer {value} />
// ...
// the rest of your app
value
can be any javaScript object of values that you want to track, e.g. (Default = document.body)
fade
is an optional boolean, which fades the panel when not hovered. (Default = false)
tabposition
is an optional string, which affects the position of the "Show/Hide" tab.
(Default)
open
is an optional string, the name of one of the objects you supplied in myStore, to auto-expand it on load (Default = null)
ratelimit
is an optional integer, for the rate at which the view should update (to avoid it getting bogged down by very fast data updates. (Default = 100 [milliseconds])
initialtogglestate
is an optional boolean, for whether the tab is open (true) or closed (false) on startup. (Default = false)
rows
is an optional array of row overrides so you can customise the display of data in the panel of Svelte Object Explorer panel (Default = [])
Assuming you have already added SvelteObjectExplorer to this, or a parent Component, AND you are using it to view the dom, then you can use the SvelteValue component to auto-expand the dom at deeper nodes - to save you from having to manually click down through the dom to find them.
Also, optionally displaying a value to help with troubleshooting.
// DeeplyNestedComponent.svelte
<script>
import SvelteValue from 'svelte-object-explorer/src/Value.svelte'
const optionalValue = "any type of value";
</script>
<div>
<div>
<div>
<SvelteValue />
Will just expand this element to show this text
</div>
<div>
<SvelteValue value={optionalValue} />
Will expand this element to show this text, and also display the value supplied above
</div>
</div>
</div>
// ...
// the rest of your component
changes to some of the option names above
mostly refactored code
no external dependencies (except dev dependencies)
now includes basic dom node parsing
3 ways to use it
use the Svelte Component version as above - but this can sometimes mean some style clashes with your app, so...
...you can use the custom element ES module version instead which sandboxes styles in its shadowRoot.
/* import SvelteObjectExplorer from 'svelte-object-explorer' */
import SvelteObjectExplorer from 'svelte-object-explorer/dist/index.mjs'
<!--SvelteObjectExplorer {value} /-->
<svelte-object-explorer {value} />
...or you can skip including it in your svelte app code at all, and just include the custom element IIFE file in your index.html instead. This will automatically mount the Custom Element version to the body
. This should mean you can use it with any vanilla front-end javaScript or other frameworks like React or Vue.
index.html
in this repo's public directory at /public/VanillaAndIIFE
which imports the copy iife_copy.js
of the dist/index.js
(note .js not .mjs)svelteobjectexplorer
window object instead, see example JS in the index.html above, e.g.let value = "whatever you're watching";
//...assign other options if needed
window.svelteobjectexplorer = { value, open, fade, tabposition, ratelimit }
It's not clever, it's not pretty...
...it's strong and it's sudden, and it can be cruel sometimes but it might just save your life. That's the power of...
svelte-object-explorer
(with apologies to Huey Lewis)
This project is licensed under the MIT License.